前言:
我写了一个 jq 指定的元素来排除事件触发器的影响,碰巧使用了,所以让我们详细地谈一谈。点击一个元素来触发一个事件的方法排除了一个元素触发一个事件,它只不过是整个文档。单击指定元素不会触发事件,但单击指定元素之外的范围会触发事件。
如下图:

代码如下:
<style>
#mochu{
width: 300px;
height: 120px;
background-color: #f5f5f5;
padding: 10px;
margin: auto;
}
</style>
<div id="mochu">
<p>点击我不会触发弹窗,而点击我之处的区域会触发弹窗的!</p>
<span>汇站网 www.huizhanii.com</span>
</div>
<script>
$('body').on('click',function (e) {
var obj = $(e.target);
if(obj.closest("#mochu").length < 1){
alert('我是触发的弹窗!');
}
});
</script>
转载请注明:汇站网 » jq 实现点击元素触发事件的方法
.flowing-border-box {
position: relative;
width: 300px;
height: 200px;
margin: 50px auto;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
color: #333;
}
.flowing-border-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #2196F3, transparent);
animation: flowTop 3s linear infinite;
}
.flowing-border-box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #2196F3, transparent);
animation: flowBottom 3s linear infinite;
}
.flowing-border-box .left-border {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 2px;
background: linear-gradient(0deg, transparent, #2196F3, transparent);
animation: flowLeft 3s linear infinite;
}
.flowing-border-box .right-border {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 2px;
background: linear-gradient(0deg, transparent, #2196F3, transparent);
animation: flowRight 3s linear infinite;
}
@keyframes flowTop {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes flowBottom {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
@keyframes flowLeft {
0% { transform: translateY(100%); }
100% { transform: translateY(-100%); }
}
@keyframes flowRight {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
本资源仅用于个人 学习和研究使用,禁止用于任何商业环境!
1. 本网站名称:汇站网
2. 本站永久网址:https://www.huizhanii.com/
3. 本站所有资源来源于网友投稿和高价 购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务 !
4. 本站所有资源的展示图片和信息不代表本站的立场 !本站只是储蓄平台及搬运
5. 下载者禁止在服务器和虚拟机下进行搭建运营,本站 所有资源不支持联网运行!只允许调试,参考和研究!!!!
6. 未经原版权作者许可,禁止用于任何 商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
7. 为尊重作者版权,请在下载24小时 内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
8. 若资源侵犯了您的合法权益, 请持 您的版权证书和相关原作品信息来信通知我们请来信
我们会及时删除,给您带来的不便,我们深表歉意!
9. 如下载链接失效、广告或者压缩包 问题请联系站长处理!
10. 如果你也有好源码或者教程,可以 发布到网站,分享有金币奖励和额外收入!
11. 本站资源售价只是赞助,收取费用 仅维持本站的日常运营所需!
12. 因源码具有可复制性,一经赞助 ,不得以任何形式退款。
13. 更多详情请点击查看
汇站网 Jquery jq实现点击元素触发事件的方法 https://www.huizhanii.com/33790.html