Javascript和jquery事件--点击事件和触发超链接

前面的不过是一些基础的知识,真正的一些事件还是有点不同。还有一些命名空间的问题。不过现在ie也开始接受W3C标准,而且平时开发也很少考虑ie了,一些事件就不考虑ie了。

点击事件--click

  大部分问题出现在js、jq触发超链接上面。我之前看到的解释是谷歌新版本阻止了触发浏览器默认的操作(超链接、右键等等),但是在下面参考的一篇文章又提出是因为要触发超链接点击的不是<a>元素,而是<a>元素里面的内容,我觉得比较靠谱,因为网上不少jq有关操作做的都是相关的改变,但是这个方法在js中无用,大致的方法有如下几种。

在Js中:

    a)  无法触发超链接,只触发了给a标签绑定的’click’监听器(标准方法)

var evt = document.createEvent( 'HTMLEvents' );

evt.initEvent('click', true, true);

document.getElementById('test').dispatchEvent(evt);//无法触发超链接a

    b)  给a标签里面添加了一个空的<span></span>,然后使用相同方法不可以触发

document.getElementById('test').childNodes[0].dispatchEvent(evt);//无法触发超链接a

    c) 使用MouseEvent可以触发,不太清楚MouseEvents和event的区别。

var event = document.createEvent('MouseEvents');

event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

document.getElementById('test').dispatchEvent(event);//可以触发超链接a

    

    d) 使用click()可以触发,这个我是真的不明白了,网上也还没有查到更多的解释,无论在js还是jq,好像它就理所当然地可以代替addEventListener进行监听器绑定,然而又区别于onclick,然后又理所当然地可以替代dispatchEvent()进行事件触发,而且不受是不是超链接限制。我之前用的最多的也是它,也有一些与它相似的事件,大概都出现在表单元素中,到时候再统一看看。

扫描二维码关注公众号,回复: 4855721 查看本文章
document.getElementById('test').click();//可以触发超链接a

在jq中:

    a) 无法触发超链接,只触发了给a标签绑定的’click’监听器(标准方法)

$('#test').trigger('click');//无法触发超链接a

    b) 给a标签里面添加了一个空的<span></span>,然后使用相同方法可以触发

$('#test span').trigger('click');//不可以触发超链接a

  c) 依旧是click()触发,不过除了js中的疑问,又多了一个疑问。由于之前所说是点击内容触发,$(‘#test’).click();不能触发,$(‘#test’)[0].click()能触发,即使#test对应的a标签没有子元素我都能理解。但是我依稀记得引发我对超链接思考的事故就发生在$a[0].click()失效啊。

我回去看了一下,下面的一段代码在http访问火狐浏览器的确是无效的,我也不知道为什么,反正就是不能用。

        

var $a = $("<a></a>").attr("href", 'worker.js').attr('target','_blank');

 $a[0].click();//在火狐浏览器中通过http访问时无效

参考:

http://www.cnblogs.com/kevinge/p/4803786.html

https://smartblack.iteye.com/blog/608477

猜你喜欢

转载自www.cnblogs.com/liwxmyself/p/10248948.html
今日推荐