<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<button>按钮</button>
<a href='http://www.baidu.com'>模拟点击</a>
<!-- jq中的模拟点击事件 -->
点击只会触发a链接的css样式,不会触发a链接的跳转事件
<script>
$('a').on('click',function(){
$(this).css('background','blue')
})
$('button').on('click',function(){
$('a').click()
})
</script>
<!-- 原生的模拟点击 -->
点击会触发css样式,同时会触发a链接的跳转事件
<script>
let btn=document.querySelector('button')
let as=document.querySelector('a')
as.onclick=function(){
this.style.backgroundColor='red'
}
btn.addEventListener('click',function(){
as.click()
})
</script>
</body>
</html>
原生和jquery模拟点击的区别
最新推荐文章于 2022-08-29 16:31:47 发布