关于 jQuery 触发 click 事件有个疑问

2014-07-17 20:24:18 +08:00
 iuhux
当我在触发一个a标签的click事件时,没有发生URL跳转。这是为什么呢?
代码在此: http://jsfiddle.net/iuhux/xfu4N/
4532 次点击
所在节点    问与答
14 条回复
Tonni
2014-07-17 20:36:32 +08:00
```
<a href="http://www.baidu.com" id="b">b</a>
```
Tonni
2014-07-17 20:37:51 +08:00
scarlex
2014-07-17 20:40:30 +08:00
```
$("#a").click(function() {
$("#b")[0].click();
})
```
Tonni
2014-07-17 20:46:12 +08:00
哦,不好意识看错问题了,浏览器不允许JS触发链接实现跳转,不过可以hack,你在标签里面嵌套一个span,下面触发span的click事件,事件冒泡到父标签a链接时会出发a的click事件,从而实现页面跳转,另外你的代码里面a链接地址是不对的,参考1楼和2楼我给出的回答,修改完后的代码是这样的:
http://jsfiddle.net/KtQQY/
iuhux
2014-07-17 20:47:27 +08:00
@scarlex 哦,这个我知道可以。我就是想知道那个为什么不可以
Tonni
2014-07-17 20:48:11 +08:00
这事StackOverflow上的讨论: http://stackoverflow.com/a/21334234
iuhux
2014-07-17 20:49:34 +08:00
@Tonni 谢谢
Tonni
2014-07-17 20:50:01 +08:00
试了下3楼的回答,发现我4楼的回答是不确切的。
txlty
2014-07-17 21:01:28 +08:00
$("#b").click(function(e) {
console.log(e)
})
$("#a").click(function() {
var e = document.createEvent('MouseEvent');
e.initEvent('click', false, false);
document.querySelector("#b").dispatchEvent(e);
})
scarlex
2014-07-17 21:18:41 +08:00
@Tonni
@luhux

$('#b') 返回的是 jQuery element,而 $('#b')[0] 返回的是 HTML element。
在 jQuery element 上面调用 click 是对该对象进行事件绑定,不过按照官方说法,$('#b').click() 也是 $('#b').trigger('click') 的简写。但作用在 <a> 标签上的时候会把 href 属性忽略掉。而在 HTML element 上面调用 click 才会真正跳转。


另一种写法是直接在 click 函数中进行跳转:

$("#b").click(function(e) {
----var href = $(this).attr('href');
----location.href = href;
});

$("#a").click(function() {
----$("#b").click();
})


参考资料:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click
http://api.jquery.com/click/
Biwood
2014-07-17 21:25:49 +08:00
这个有点意思,用原生JavaScript写这个函数没有任何问题,用jQuery却阻止了连接跳转事件
Tonni
2014-07-17 21:37:37 +08:00
@scarlex 嗯,我之前都是用事件冒泡的方式触发的,受教了。
Biwood
2014-07-17 21:42:04 +08:00
直接看了一下未编译版的jQuery源码,这里是click()的定义:

click: {
// For checkbox, fire native event so checked state will be right
trigger: function() {
if ( jQuery.nodeName( this, "input" ) && this.type === "checkbox" && this.click ) {
this.click();
return false;
}
},

// For cross-browser consistency, don't fire native .click() on links
_default: function( event ) {
return jQuery.nodeName( event.target, "a" );
}
}

注释里面有一句“For cross-browser consistency, don't fire native .click() on links”,大意是“为了兼容多个浏览器,不触发链接上原生的click()事件”。这应该是jQuery为了增强其兼容性而做出的妥协吧。
chemzqm
2014-07-17 22:07:51 +08:00
你想跳网页 location.href = url 不就行了,没必要这么搞吧

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/123193

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX