您现在的位置是：网站首页 -> 网页相关 文章内容
javascript 模拟鼠标点击-itarticl.cc-IT技术类文章记录&分享
发布时间: 5年前【网页相关】 131人已围观【返回】
1、JavaScript模拟鼠标事件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>simulate event</title>
</head>
<body>
<button id="test-btn">test simulate event</button>
<script type="text/javascript">
/**
event.initMouseEvent(
type,
canBubble,
cancelable,
view,
detail,
screenX, screenY, clientX, clientY,
ctrlKey, altKey, shiftKey, metaKey,
button, // which button of mouse down
relatedTarget
);
*/
var btn = document.querySelector("#test-btn");
// 先要注册，然后触发，否则不行。
btn.addEventListener("click", function(e) {
console.log("simulate event");
}, false);
var event = document.createEvent("MouseEvents");
event.initMouseEvent(
"click",
true,
true,
document.defaultView,
0,
0, 0, 0, 0
false, false, false, false,
0,
null
);
btn.dispatchEvent(event);
</script>
</body>
</html>
2、jquery click()方法模拟点击事件对a标签不生效的解决办法
问题分析
点击A标签本身，并不会触发跳转到指定链接的事件，就是说，我们平时都是点击的A标签中的文字了。 所以要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。
打印$(“a”)[0]，得到的是http://www.baidu.com，但实际上$(“a”)[0]是一个object对象，或许说是DOM对象更贴切一些。
解决方案
使用原生DOM元素操作a标签,调用原生click()方法;
document.getElementById("abc ").click();
或者
将jquery对象转换为原生DOM对象
$("#abc ")[0].click();
总结
a标签模拟点击事件需要使用原生DOM元素调用click()方法;jquery对象无法调用,因此推荐在以后的开发中尽量使用原生DOM对象模拟点击.
3、jQuery对象与DOM对象之间的转换
jQuery对象转成DOM对象：
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后，就可以任意使用jQuery的方法了。
通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。
发布时间: 5年前【网页相关】131人已围观【返回】【回到顶端】
很赞哦！ (1)
下一篇：TamperMonkey使用
相关文章
点击排行
单一职责原则、里氏替换原则、依赖倒置原则
站长推荐
接口隔离原则、迪米特法则、开闭原则
猜你喜欢
站点信息
- 建站时间：2016-04-01
- 文章统计：728条
- 文章评论：82条
- QQ群二维码：扫描二维码，互相交流
