当前位置: 首页 > 面试题库 >

Javascript检测div外部的点击事件

张俊茂
2023-03-14
问题内容

我有一个id为“ content-
area”的div,当用户在该div之外单击时,我想提醒他们他们在该div之外单击的事实。我将如何使用JavaScript解决此问题?

<div id = "outer-container">
   <div id = "content-area">
      Display Conents 
   </div>
</div>

问题答案:

用纯Javascript

看看这个小提琴,看看这就是你所追求的!

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';   
    }
}


 类似资料:
  • 问题内容: 我有一些HTML菜单,当用户单击这些菜单的标题时,它们会完整显示。当用户在菜单区域之外单击时,我想隐藏这些元素。 jQuery可能会发生这种情况吗? 问题答案: 注意:应该避免使用,因为它会破坏DOM中的正常事件流。有关更多信息, propagation/)。考虑使用这种方法,而不是 将单击事件附加到关闭窗口的文档主体。将单独的click事件附加到容器,以停止传播到文档主体。

  • 问题内容: 如何检测元素外部的点击?我正在使用Vue.js,因此它将不在我的模板元素之外。我知道如何在Vanilla JS中做到这一点,但是当我使用Vue.js时,我不确定是否有更合适的方法来做到这一点? 我想我可以使用更好的方法来访问元素? 问题答案: 只需设置一次自定义指令即可很好地解决: 用法: 在组件中:

  • 问题内容: 我正在寻找一种检测点击事件是否在组件外部发生的方法。jQuery最近的()用于查看click事件中的目标是否具有dom元素作为其父元素之一。如果存在匹配项,则单击事件属于子项之一,因此不被视为在组件之外。 因此,在我的组件中,我想将单击处理程序附加到窗口。当处理程序触发时,我需要将目标与组件的dom子代进行比较。 click事件包含“path”之类的属性,该属性似乎包含事件经过的dom

  • 问题内容: 我有一些HTML菜单,当用户单击这些菜单的标题时,它们会完整显示。当用户在菜单区域之外单击时,我想隐藏这些元素。 jQuery可能会发生这种情况吗? 问题答案: 注意:应该避免使用,因为它会破坏DOM中的正常事件流。有关更多信息,请参见本文。考虑使用这种方法,而不是 将单击事件附加到关闭窗口的文档主体。将单独的click事件附加到容器,以停止传播到文档主体。

  • 问题内容: 如何检测Angular中组件 外部 的点击? 问题答案: import { Component, ElementRef, HostListener, Input } from ‘@angular/core’;

  • 问题内容: 我了解,如果是跨域用户,则无法判断用户在做什么。我想做的是跟踪用户是否完全单击。我想象一个场景,在之上不可见,而the 会随后将click事件传递给。 这样的事情可能吗?如果是的话,我将如何处理?的是广告,所以我必须在所使用的标签没有控制权。 问题答案: 这样的事情可能吗? 否。您所能做的就是检测鼠标进入iframe的可能性,以及检测到鼠标进入iframe的可能性(尽管不可靠)(即,试