0°

jQuery同时设定hover或click及模拟点击事件对a标签不生效解决

同时设定

示例:
要求如下两段合一,即hover和click都会响应。

$('#target').click(function() {
  // common operation
});
$('#target').hover(function () {
    // common operation
});

解决办法:

var hoverOrClick = function () {
    // do something common
}
$('#target').click(hoverOrClick).hover(hoverOrClick);

或者:
1.

$('#target').on('click mouseover', function () {
    // Do something for both
});

2.

jQuery('#target').bind('click mouseover', function () {
    // Do something for both
});

模拟点击

jquery click()方法模拟点击事件对a标签不生效的解决办法

问题分析

<a href="www.baidu.com"></a>

点击A标签本身,并不会触发跳转到指定链接的事件,就是说,我们平时都是点击的A标签中的文字了。 所以要想用JS模拟点击A标签事件,就得先往A标签中的文字添加能被JS捕获的元素,然后再用JS模拟点击该元素即可。
打印$(“a”)[0],得到的是http://www.baidu.com,但实际上$(“a”)[0]是一个object对象,或许说是DOM对象更贴切一些。

解决方案

解决方案一
document.getElementById("abc ").click();

使用原生DOM元素操作a标签,调用原生click()方法;

解决方案二
$("#abc ")[0].click();

将jquery对象转换为原生DOM对象,也适用于class对象

$(".abc  a")[0].click();

总结

a标签模拟点击事件需要使用原生DOM元素调用click()方法;jquery对象无法调用,因此推荐在以后的开发中尽量使用原生DOM对象模拟点击.

 

本文短地址:
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论