如何给View添加点击事件 - 简书
如何给View添加点击事件
项目中有很多地方需要添加点击事件,重复代码很多,所以做了一个UIView的分类,专门做点击事件使用.项目地址:
代码很简单,主要有一点就是注意分类不能直接添加属性,需要用到运行时相关内容.
\\UIView+Tap.h文件
@interface UIView (Tap)
- (void)addTapBlock:(void(^)(id obj))tapA
\\UIView+Tap.m文件
#import &objc/runtime.h&
static const void* tagValue = &tagV
@interface UIView ()
@property (nonatomic, copy) void(^tapAction)(id);
@implementation UIView (Tap)
- (void)tap{
if (self.tapAction) {
self.tapAction(self);
- (void)addTapBlock:(void(^)(id obj))tapAction{
self.tapAction = tapA
if (![self gestureRecognizers]) {
self.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap)];
[self addGestureRecognizer:tap];
-(void)setTapAction:(void (^)(id))tapAction {
objc_setAssociatedObject(self, tagValue, tapAction, OBJC_ASSOCIATION_COPY_NONATOMIC);
-(void (^)(id))tapAction {
return objc_getAssociatedObject(self, tagValue);
正如大家所见,如果要接收点击事件,必须userInteractionEnabled设置为YES,所以不管怎么只要确认要给视图添加点击事件,都会被设置为userInteractionEnabled = YES
UIView *redView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
redView.backgroundColor = [UIColor redColor];
[redView addTapBlock:^(UIView* obj) {
NSLog(@"redView%@",obj.backgroundColor);
[self.view addSubview:redView];
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(50, 250, 100, 100)];
imageView.image = [UIImage imageNamed:@"icon"];
[imageView addTapBlock:^(UIImageView* obj) {
NSLog(@"imageView:\n%@",obj.image);
[self.view addSubview:imageView];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(150, 400, 100, 100)];
label.text = @"这是label,点击这里...";
[label addTapBlock:^(UILabel* obj) {
NSLog(@"label:\n%@",obj.text);
[self.view addSubview:label];
iOS开发者，沉迷移动开发，对移动开发有着无与伦比的热情...奋进吧,美好的明天就在眼前js循环给li绑定参数不同的点击事件
&li&1&/li&
&li&2&/li&
&li&3&/li&
&li&4&/li&
&script type="text/javascript"&
var li=document.getElementsByTagName_r("li");
for(var i=0;i&li.i++){
&& (function(x){
li[x].onclick=function(){alert(x);}
每个li弹出来的值都是不同的哦
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。本帖子已过去太久远了，不再提供回复功能。li[i].onclick = function(){//再注册一个点击事件，当点击的时候所有标签都恢复最初状态
for(var n=0;n&li.n++){//这步是相对于未被点击部分的样式
li[n].className = &&;
div[n].className = &hide&;
}这里为什么是未被点击的？
&!DOCTYPE html&&html&&head&
&meta charset="UTF-8"&
&title&实践题 - 选项卡&/title&
&style type="text/css"&
标签和文本结合区域效果制作：
1.用ul做分类标签
2.把ul的display定义为block使ul区域和下面div区域结合在一起
3.给ul定义一个下边框或者给div内容区域定义一个上边框
4.所有li标签默认样式不设下边框，作为激活显示的li标签加宽其#fff（白色）
区域的下边框，覆盖。
margin:0 padding:0 font:12 font-family:微软雅黑;
width:350 height:200 padding:5 margin:20
border:1px solid # } #tabs ul{
list-style: display: height:30 line-height:30
} #tabs ul li{
float: width:80 height:28 line-height:28 text-align:border-bottom: display:inline-margin:0px 3 border:1px solid #
cursor: background:# list-style: } #tabs ul li.on{
border-top:2 border-bottom:2px solid # } #tabs div{
height:120 line-height:25border:1px solid #336699;border-top:2padding:5 } .hide{display:}
&script type="text/javascript"&
window.onload=function(){
var oTab = document.getElementById("tabs")
var li = document.getElementsByTagName("li");
var div = oTab.getElementsByTagName("div");//oTabs.get...是为了定义className作用对象为id为tabs下的所有文本div
for(var i=0;i&li.i++){//获取所有i编号的元素
li[i].index =
//定义一个index属性对li进行编号
li[i].onclick = function(){//再注册一个点击事件，当点击的时候所有标签都恢复最初状态
for(var n=0;n&li.n++){//这步是相对于未被点击部分的样式
li[n].className = "";
div[n].className = "hide";
this.className = "on";//再对点击事件添加相应的属性
div[this.index].className = "";//通过之前的index编号绑定的指定div
非常感谢！
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-22被浏览250分享邀请回答11 条评论分享收藏感谢收起}