我有一个 id="content-area" 的 div,当用户在这个 div 之外点击时,我想提醒他们他们点击了它之外的事实。我将如何使用 JavaScript 来解决这个问题?
<div id = "outer-container">
<div id = "content-area">
Display Conents
</div>
</div>
我有一个 id="content-area" 的 div,当用户在这个 div 之外点击时,我想提醒他们他们点击了它之外的事实。我将如何使用 JavaScript 来解决这个问题?
<div id = "outer-container">
<div id = "content-area">
Display Conents
</div>
</div>
看看这个小提琴,看看这是否是你所追求的!
document.getElementById('outer-container').onclick = function(e) {
if(e.target != document.getElementById('content-area')) {
document.getElementById('content-area').innerHTML = 'You clicked outside.';
} else {
document.getElementById('content-area').innerHTML = 'Display Contents';
}
}
Node.contains ()方法返回一个布尔值,指示节点是否是给定节点的后代
您可以使用捕获事件
document.addEventListener("click", clickOutside, false);
function clickOutside(e) {
const inside = document.getElementById('content-area').contains(e.target);
}
记得删除在正确位置监听的事件
document.removeEventListener("click", clickOutside, false)
将 onClick-Event 绑定到内容区域之外的元素,例如正文。然后,在事件内部,检查目标是内容区域还是内容区域的直接或间接子项。如果没有,那就报警。
我做了一个函数来检查它是否是一个孩子。如果节点的父节点是搜索到的父节点,则返回 true。如果没有,那么它检查它是否真的有一个父节点。如果不是,则返回 false。如果它有一个父节点,但它不是被搜索的父节点,它会检查父节点的父节点是否是被搜索的父节点。
function isChildOf(child, parent) {
if (child.parentNode === parent) {
return true;
} else if (child.parentNode === null) {
return false;
} else {
return isChildOf(child.parentNode, parent);
}
}
另请查看实时示例(内容区域 = 灰色)!
我制作了一个简单而小型的js 库来为您执行此操作:
它劫持了原生的 addEventListener,创建了一个 outclick 事件,并且在 .onoutclick 的原型上也有一个 setter
基本用法
使用 outclick 您可以在 DOM 元素上注册事件侦听器,以检测是该元素的另一个元素还是其中的另一个元素是否被单击。最常见的用途是在菜单中。
var menu = document.getElementById('menu') menu.onoutclick = function () { hide(menu) }
这也可以使用 addEventListener 方法来完成
var menu = document.getElementById('menu') menu.addEventListener('outclick', function (e) { hide(menu) })
或者,您也可以使用 html 属性 outclick 来触发事件。这不处理动态 HTML,我们还没有计划添加它
<div outclick="someFunc()"></div>
玩得开心!
用于document.activeElement
查看您的哪些 html 元素处于活动状态。
这是一个参考: MDN 中的 document.activeElement
$('#outer-container').on('click', function (e) {
if (e.target === this) {
alert('clicked outside');
}
});
这是针对您在外部容器内部但在content-area外部单击的情况。
使用 jquery 作为 DOM 访问的最佳选择
$(document).click(function(e){
if($(e.target).is("#content-area") || $(e.target).closest("#content-area").length)
alert("inside content area");
else alert("you clicked out side content area");
});
这是小提琴:http: //jsfiddle.net/uQAMm/1/
$('#outercontainer:not(#contentarea)').on('click', function(event){df(event)} );
function df(evenement)
{
var xstart = $('#contentarea').offset().left;
var xend = $('#contentarea').offset().left + $('#contentarea').width();
var ystart = $('#contentarea').offset().top;
var yend = $('#contentarea').offset().top + $('#contentarea').height();
var xx = evenement.clientX;
var yy = evenement.clientY;
if ( !( ( xx >= xstart && xx <= xend ) && ( yy >= ystart && yy <= yend )) )
{
alert('out');
}
}
将其放入您的文档中:
<script>
document.onclick = function(e) {
if(e.target.id != 'content-area') alert('you clicked outside of content area');
}
</script>
这是一个简单的 eventListener,它检查所有父元素是否包含元素的 id。否则,点击在元素之外
html
<div id="element-id"></div>
js
const handleMouseDown = (ev) => {
let clickOutside = true
let el = ev.target
while (el.parentElement) {
if (el.id === "element-id") clickOutside = false
el = el.parentElement
}
if (clickOutside) {
// do whatever you wanna do if clicking outside
}
}
document.addEventListener("mousedown", handleMouseDown)