如何捕捉页面正文上的点击
how to catch click on page body
我有一个页面,里面有很多div,当有人点击其中一个时,它会调用一个javascript方法。如果有人点击了body,我还需要能够触发另一个方法调用,这意味着他们没有点击div,而是在div之外。当我在body标记上放置jquery点击处理程序时,即使你点击了div,它也会触发。有人知道我如何将点击限制在div之外的任何东西吗?谢谢
您需要检查点击事件的原始目标。它可以作为e.target
访问,其中e
是单击事件。
var div = document.getElementById('the-div');
document.body.onclick = function (e) {
var target = e.target;
while (target !== document.body) {
if (target === div) {
// The user clicked inside the div
return;
}
target = target.parentNode;
}
// do the stuff you want when they click outside the div here
};
您可以在整个文档上设置onclick
回调:
document.onclick = function(){
alert("CLICK");
};
另请参阅JavaScript事件委派
您可以使整个窗口跟踪单击事件,如果单击div,它将停止事件传播。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#wrapper {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
#antidiv {
position:absolute;
left:40px;
top:80px;
width:100px;
height:100px;
background-color:#3FF;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="antidiv"></div>
</div>
<script>
document.getElementById("antidiv").addEventListener("click", function(e) {
e.stopPropagation();
}, false);
document.body.addEventListener("click", function(e) {
alert("You didn't click the div!");
}, false);
</script>
</body>
</html>
相关文章:
- javascript问题正文样式
- 滚动然后捕捉到顶部而不是取消捕捉
- JQuery在单击正文时隐藏上下文菜单
- 在一个页面中具有多个捕捉绘图和捕捉内容
- “createImageData()”和“new ImageData(()”有何不同
- 我可以在网页正文中插入文本链接吗
- 未捕获的类型错误:无法设置属性'innerHTML'如果为null,则将脚本移动到正文不会;不起作用
- 正在尝试将标题标记添加到mailto链接,正文中包含URL
- 如何在浏览器窗口变大/变小时捕捉元素的宽度
- 点击AngularJS模态窗口捕捉背景事件
- 在外部(正文)单击时关闭弹出窗口
- 如何通过angular JS映射捕捉SVG圆
- 正文中未显示内容
- 捕捉TAB键按下键向上
- jQuery UI可拖动:自定义捕捉方法
- 如何捕捉网站的某个部分
- 将电子邮件正文导出到Google Sheets中的多个单元格中
- 如何从应用于正文的css中排除特定的表单
- javascript可拖动滑块,可在mouseUp上捕捉回中间位置
- 如何捕捉页面正文上的点击