示例代码：

Question

我想使整个div可点击，但子div除外。该子div不是div的直接子级，而是更深一层。我想通过仅传递div ID或类名来动态排除此子div。

我试图用有效的jQuery“ .not（）”和“ .children（）”方法解决它。但是从某种意义上说，它是静态的，我需要知道div在哪个级别上，并且需要相应地对齐方法。但是，我想要一些动态的东西，它只采用div的类名或id，然后从DOM树中找到它，并从新的DOM对象链中排除它，以便可以应用jQuery“ .click”和“ .hover”函数在整个div上，但该特定div除外。

我为我的问题创建了一个虚拟的例子。在示例中，我要使除“＃d3” div之外的整个div（即id = main1）超链接。

这是我的JSFiddle：JSFiddle

示例代码：

HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
            <title>
                Untitled Document
            </title>

        </meta>
    </head>
    <body>
        <div class="center border divmain1" id="main1">
            <a href="https://www.google.ca" style="display: block">
                link
            </a>
            <p>
                Main
            </p>
            <div class="border-thin divd1" id="d1">
                <p>
                    d1
                </p>
            </div>
            <div class="border-thin divd2" id="d2">
                <p>
                    d2
                </p>
                <div class="border-thin divd3" id="d3">
                    <p>
                        d3
                    </p>
                    <div class="border-thin divd4" id="d4">
                        d4
                    </div>
                    <div class="border-thin divd5" id="d5">
                        d5
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS：

.border {
  border: 5px solid RosyBrown;
}
.border-thin {
  border: 2px solid RosyBrown;
}
.divmain1 {
  width: 90%;
  margin: 0 auto 0 auto;
  overflow: hidden;
}
.divd1 {
  width: 30%;
  float: left;
}
.divd2 {
  width: 60%;
  float: right;
  margin: 0 0 0 3.5%;
}
.divd3 {
  margin: auto;
  width: 90%;
}
.divd4 {
  width: 30%;
}
.divd5 {
  width: 30%;
}

jQuery：

// find elements
var main1 = $("#main1")
var d3 = $("#d3")

// handle click and hover pointer
main1.on("click", function(){
  window.open('https://www.google.ca');
});

main1.hover(function(){
  $(this).css("cursor", "pointer");
});

有人可以帮助我如何使整个div可点击并动态排除子div吗？

Answer 1

您可以在jQuery中运行

event.stopPropagation();

在您不想触发初始功能的div子项的click事件中。

Answer 2

使用cancelBubble

例如，禁用“＃d5” div上的根事件

$('#d5').on('click', function(e){
    // stop the event from bubbling.
    e.cancelBubble=true
});

Answer 3

我不太喜欢jQuery，但是我可以告诉您，这可以使用纯JavaScript来完成。您要做的就是在顶级div上实现一个事件侦听器，并查看clicked元素或其父元素是否具有目标类。

让我们以这个HTML标记为例，当有人单击divd4中的任何内容时，我们将触发警报“ 目标已锁定”，其他人则单击“ 常规操作”

function HasSelfClassOrParent(element, classname) {
  if (element.classList && element.classList.contains(classname))
    return true;

  return element.parentNode && HasSelfClassOrParent(element.parentNode, classname);
}


let divd2 = document.querySelector(".divd2")
let target = 'divd4'

divd2.addEventListener("click", function(event) {

  let isTargetOrChild = HasSelfClassOrParent(event.target, target)

  if (isTargetOrChild) {
    alert("Target Locked")
  } else {
    alert("General Action")
  }

})

.border {
  border: 5px solid RosyBrown;
}

.border-thin {
  border: 2px solid RosyBrown;
  padding: 20px;
  margin-bottom: 10px
}

.divd4{
  background: #64B448;
  color: #fff;
  cursor: pointer;
}

<p>Click on div four and see what happens</p>

<div class="border-thin divd2" id="d2">
  <p>I am Div 2</p>

  <div class="border-thin divd3" id="d3">
    <p>I am Div 3</p>

    <div class="border-thin divd4" id="d4">
      <p>I am a simple paragraph inside div four</p>
      <p>I am a another paragraph inside div four</p>
    </div>

    <div class="border-thin divd5" id="d5">
      I am Div 5
    </div>

  </div>

</div>

Answer 4

由于#d3同时包含#d4和#d5，所以我假设您也不想触发这些元素。

这里的关键是传递event对象，以便您可以检查实际接收click的元素是什么。

在这种情况下，可以使用Node.contains()检查该元素是否是目标元素的后代。

Node.contains（）方法返回一个布尔值，指示是否节点是给定节点的后代，即节点本身，它的直子[...]

否则，您不需要d3.contains，而只需if (e.target != d3)。

// find elements
var main1 = $("#main1")
var d3 = $("#d3").get(0) // Get the HTMLElement

// handle click and hover pointer
main1.on("click", function(e) {
  if (!d3.contains(e.target)) {
    console.log("I'll open a window");
  } else {
    console.log("I'm " + e.target.id + " and won't open a window")
  }
});

main1.hover(function() {
  $(this).css("cursor", "pointer");
});

.border {
  border: 5px solid RosyBrown;
}

.border-thin {
  border: 2px solid RosyBrown;
}

.divmain1 {
  width: 90%;
  margin: 0 auto 0 auto;
  overflow: hidden;
}

.divd1 {
  width: 30%;
  float: left;
}

.divd2 {
  width: 60%;
  float: right;
  margin: 0 0 0 3.5%;
}

.divd3 {
  margin: auto;
  width: 90%;
}

.divd4 {
  width: 30%;
}

.divd5 {
  width: 30%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center border divmain1" id="main1">
  <a href="https://www.google.ca" style="display: block">link</a>
  <p>
    Main
  </p>
  <div class="border-thin divd1" id="d1">
    <p>d1</p>
  </div>
  <div class="border-thin divd2" id="d2">
    <p>d2</p>
    <div class="border-thin divd3" id="d3">
      <p>d3</p>
      <div class="border-thin divd4" id="d4">d4</div>
      <div class="border-thin divd5" id="d5">d5</div>
    </div>
  </div>
</div>
</body>

</html>

如何使整个div除深层子div以外都可点击？

示例代码：

HTML：

CSS：

jQuery：

4 个答案: