元素绑定click点击事件方法

 　　当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

　　最简单的莫过于使用click方法：

　　?

1
2
3
4
5

<input id="btn" type="button" value="BUTTON" onclick="alert(1)"/>
<script>
var btn = document.getElementById('btn');
btn.click();
</script>

　　所有浏览器都弹出了1。但是如果把input换成div呢?

　　?

1
2
3
4
5

<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(2)"></div>
<script>
var d1 = document.getElementById('d1');
d1.click();
</script>

　　这次Safari/Chrome中没有弹出2。即不是所有浏览器中的所有元素都支持click方法。事实上只有input/button元素在所有浏览器才具有click方法。

　　以上的事件都是直接添加在html属性中的(内联事件)。click方法能触发使用el.onXXX/addEventListener/attachEvent添加的事件吗?

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<input id="btn1" type="button" value="BUTTON 1"/>
<input id="btn2" type="button" value="BUTTON 2"/>
<script>
var addListener = window.addEventListener ?
function(el, type, fn) { el.addEventListener(type, fn, false); } :
function(el, type, fn) { el.attachEvent('on' + type, fn); };
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
btn1.onclick = function(){
alert(3);
};
addListener(btn2, 'click', function() {alert(4)});
btn1.click();
btn2.click();
</script>

　　所有浏览器都依次弹出了3,4。说明支持click方法的元素，无论使用内联方式还是el.onXX又或addEventListener/attachEvent添加事件都能触发。

　　click方法已经写入了HTML5草案，如果Safari/Chrome完成对剩下的元素的实现(非input/button)。那么模拟点击将十分简单，直接调用click方法。Firefox也是刚刚在版本5中实现对非input/button元素的click方法实现，这点Safari/Chrome有些落后了。

　　既然Safari/Chrome中click不可用， 我们就用dispatchEvent来实现了。

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<input id="btn1" type="button" value="BUTTON 1" onclick="alert(1)"/>
<input id="btn2" type="button" value="BUTTON 2" onclick="alert(2)"/>
<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(3)"></div>
<script>
function dispatch(el, type){
try{
var evt = document.createEvent('Event');
evt.initEvent(type,true,true);
el.dispatchEvent(evt);
}catch(e){alert(e)};
}
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var d1 = document.getElementById('d1');
dispatch(btn1, 'click');
dispatch(btn2, 'click');
dispatch(d1, 'click');
</script>

　　依次弹出了1,2,3。换成其它事件添加方式亦可触发。IE中还有个fireEvent去主动触发事件，当然如果是点击事件使用click更好。非点击事件则只能通过fireEvent去触发了。

　　最后给出我的triggerClick方法，实现方式判断浏览器，判断nodeName。依据是Safari/Chrome不支持非input/button元素的click方法。

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13

function triggerClick( el ) {
var nodeName = el.nodeName,
safari_chrome = /webkit/.test(navigator.userAgent.toLowerCase());
if(safari_chrome && (nodeName != 'INPUT' || nodeName != 'BUTTON')) {
try{
var evt = document.createEvent('Event');
evt.initEvent('click',true,true);
el.dispatchEvent(evt);
}catch(e){alert(e)};
}else{
el.click();
}
}

　　上面的实现方式让你能明白浏览器的差异，但实现其实有点罗嗦。直接判断元素是否具有click方法即可，Safari/Chrome中非input/button元素没有click方法，返回undefined。

　　?

1
2
3
4
5
6
7
8
9
10
11

function triggerClick( el ) {
if(el.click) {
el.click();
}else{
try{
var evt = document.createEvent('Event');
evt.initEvent('click',true,true);
el.dispatchEvent(evt);
}catch(e){alert(e)};
}
}

　　特性判断也比浏览器判断有更好的前瞻性，比如Safari/Chrome在后续版本中实现了非input/button元素的click方法，那么特性判断的函数仍然可以向下兼容。

　　以上所述就是本文的全部内容了，希望大家能够喜欢

时间： 2024-09-11 12:37:58

元素绑定click点击事件方法的相关文章

元素绑定click点击事件方法_javascript技巧

最简单的莫过于使用click方法: <input id="btn" type="button" value="BUTTON" onclick="alert(1)"/> <script> var btn = document.getElementById('btn'); btn.click(); </script> 所有浏览器都弹出了1.但是如果把input换成div呢? <div id

jquery-ui-draggable-事件捕获对一个元素监听拖动事件并对这个元素的子元素监听点击事件

问题描述 事件捕获对一个元素监听拖动事件并对这个元素的子元素监听点击事件 在不支持事件冒泡的浏览器中.对一个元素监听拖动事件并对这个元素的子元素监听点击事件.这两个事件会冲突.只能执行拖动事件.这种问题怎么解决? 解决方案 Preference元素和监听事件 解决方案二: 说明你没点击到子元素,一般是从子元素冒泡,不支持冒泡不会触发父元素的拖动事件 不过有哪种浏览器不支持冒泡?还没碰到过.. 解决方案三: 浏览器都支持冒泡啊,如果你只用捕获,那么肯定是先监听到父元素的事件,再是子元素,但问题是你

JQuery 给元素绑定click事件多次执行的解决方法_jquery

原绑定方法: $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有

Android开发之PullToRefresh的Click点击事件的监听实现长按删除Item

本文为原创博客,出自http://blog.csdn.net/minimicall 到今天为止,搜芽的卖家版本应该来说已经基本完成,攻坚克难的一路过来.速度也控制的比较好. 项目过程进度 从任务分配量上来看,基本还是我个人英雄主义.接下来这样不行.但暂时也没办法,师弟还需要一个学习的过程.智质不错,而且态度端正.相信搜芽买家,他就可以承担更多的开发任务了. 接下来进入正题,说我们的PullToRefresh的点击事件.其实,我是想做长按进入删除的. 见效果图.当然这个是我做出来之后的了,但做出来

Android中捕获TTextView文本中的链接点击事件方法_Android

Android中的TTextView很强大,我们可以不仅可以设置纯文本为其内容,还可以设置包含网址和电子邮件地址的内容,并且使得这些点击可以点击.但是我们可以捕获并控制这些链接的点击事件么,当然是可以的. 本文将一个超级简单的例子介绍一下如何实现在Android TextView 捕获链接的点击事件. 关键实现 实现原理就是将所有的URL设置成ClickSpan,然后在它的onClick事件中加入你想要的控制逻辑就可以了. 复制代码 代码如下: private void setLinkClick

Android中捕获TTextView文本中的链接点击事件方法

Android中的TTextView很强大,我们可以不仅可以设置纯文本为其内容,还可以设置包含网址和电子邮件地址的内容,并且使得这些点击可以点击.但是我们可以捕获并控制这些链接的点击事件么,当然是可以的. 本文将一个超级简单的例子介绍一下如何实现在Android TextView 捕获链接的点击事件. 关键实现 实现原理就是将所有的URL设置成ClickSpan,然后在它的onClick事件中加入你想要的控制逻辑就可以了. 复制代码 代码如下: private void setLinkClick

JQuery给元素绑定click事件多次执行的解决方法_jquery

原绑定方法: 复制代码 代码如下: $("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: 复制代码 代码如下: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

jQuery on()方法绑定动态元素的点击事件实例代码浅析_jquery

之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案... jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果.大家看看源码就知道了.生成的按钮基数项on方法点击无效l

jQuery绑定和解绑点击事件及重复绑定解决办法

先简单说下jQuery绑定和解绑点击事件的方法,直接上代码:  代码如下 复制代码 $("#element").click(function(){}); //绑定点击事件函数 $("#element").unbind();        //解绑点击事件 $("#element").click(function(){});  //绑定其它函数 即,要对一个绑定过点击事件的元素绑定其它函数,需先对其解绑. 上面的代码看起来好简单,但是实际应用中却要