活动公告当前位置:星鸿娱乐 > 活动公告 > >

元素绑定click点击事件方法

  

[click点击事件]元素绑定click点击事件方法

  

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

  
  
    var btn = document.getElementById('btn');  btn.click();  
  
  

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

  
  

  
  
  
  var d1 = document.getElementById('d1');  d1.click();  
  
  

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

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

  
  

  
  
      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();  

  
  

所有浏览器都依次弹出了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来实现了。

  
  

  
  
      
  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');  
  
  

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

  
  

  

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

  
  

  
  
  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。

  
  

  
  
  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方法,那么特性判断的函数仍然可以向下兼容。

  

  

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

(责任编辑:admin)

上一篇:星鸿娱乐注册JS实现网页背景颜色与select框中颜色

下一篇:关于jquery动态增减控件的一些想法和小插件

推荐内容

客户服务热线

010-400-12345

在线客服