如何在沒有其他div的情況下選擇div

Question

我希望能夠單擊一個div，但不能單擊外部div內div內另一個div的區域。

我試圖在選擇器中使用：not（）選擇不帶內部div的其他div，但是沒有用。

<div class=outer>
  <div class=inner1>
    <div class=inner2>
      <div class=notClickable>
        <div class=alsoNotClickable>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

$("div.outer:not(div.notClickable)").click(function(){
  ...
});

我希望我可以在div class = outer內部單擊，但不能在div class = notClickable及其子級內部單擊。

Answer 1

一種選擇是在不可點擊的div上添加stopPropagation() 。

事件接口的stopPropagation（）方法可防止在捕獲和冒泡階段進一步傳播當前事件。

 $("div.outer").click(function() { console.log("click"); }); $("div.notClickable").click(function(e) { e.stopPropagation(); }); $("div.alsoNotClickable").click(function(e) { e.stopPropagation(); }); 

 .outer { width: 300px; height: 300px; background-color: green; } .notClickable { width: 100px; height: 100px; background-color: red; } .alsoNotClickable { width: 50px; height: 50px; background-color: pink; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class=outer> <div class=inner1> <div class=inner2> <div class=notClickable> <div class=alsoNotClickable> </div> </div> </div> </div> </div> 

Answer 2

為此，您可以檢查事件的target屬性。 如果它與您將事件掛鈎到的元素相匹配，則您知道該事件尚未從孩子身上冒出來。 嘗試這個：

 $("div.outer").click(function(e) { if ($(e.target).is('div.outer')) { console.log('You clicked the outer div'); } else { console.log('You clicked a child div'); } }); 

 div.outer, div.outer div { padding: 10px; border: 1px solid #CCC; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="outer"> Outer <div class="inner1"> Child <div class="inner2"> Child <div class="notClickable"> Child <div class="alsoNotClickable"> Child </div> </div> </div> </div> </div> 

Answer 3

我認為您可以通過將以下行添加到函數中來停止傳播：

event.stopPropagation();

例如：

$("div.outer:not(div.notClickable)").click(function(event) {
  ...
  event.stopPropagation();
});

Answer 4

請在我使用click function地方檢查此小提琴 。 讓我知道是否適合您:)

Answer 5

為您要選擇的div分配一個ID。 然后選擇ID。