Question

我的HTML代码就像

android: layout_width =warp_content

因此，当我单击第1层时，由于事件冒泡，所有4个图层的所有点击事件都将被触发。我们可以使用停止传播来阻止冒泡。我想知道的是，如果我点击第1层是否可以跳过第1层和第2层的点击功能然后执行第3层的点击功能并跳过第4层的功能？我怎么能这样做？

Answer 1

以下是实现所需功能的示例代码，我所做的就是通过向相应的元素提供id或类来做到这一点。

因此，根据以下代码，如果您点击“第1层”或第2层或“第3层”，则只会出现“第3层”警告 -

function showAlert(){

if(event.currentTarget.firstElementChild.textContent=='layer 3')
	alert(event.currentTarget.firstElementChild.textContent);
}

<div onclick="showAlert()">
   <h1>layer 4</h1>
   <div onclick="showAlert()" >
      <h1>layer 3</h1>
      <div onclick="showAlert()">
         <h1>layer 2</h1>
         <div onclick="showAlert()">
            <h1>layer 1</h1>
         </div>
      </div>
   </div>
</div>

Answer 2

我认为有很多不同的方法可以实现这一目标。根据单击其他图层时应发生的情况，然后layer 1。

无论哪种方式，我都不确定如何使用内联javascript。你应该尽量避免它，因为有方法，但看起来很复杂。 Read this for more information

向元素添加data属性，然后在该元素上添加eventListener要简单得多。这给你带来了很多好处。

试试这段代码：

＆＃13;

var executeFunctionForLayer = 3;

var layers = document.querySelectorAll('[data-layer]');

layers.forEach(function(element, index){
    element.addEventListener("click", function(event){
        if(parseInt(element.dataset.layer, 10) === executeFunctionForLayer) {
            // here we do the crazy function stuff
            alert('layer ' + element.dataset.layer);
            
            // after this one stop from bubbeling
            event.stopPropagation();
        } 
        event.preventDefault();  // prevent from default 
        return;
    });
    
});

＆＃13;

<div data-layer="4">
  <h1>layer 4</h1>
  <div data-layer="3">
      <h1>layer 3</h1>
      <div data-layer="2">
            <h1>layer 2</h1>
            <div data-layer="1">
                <h1>layer 1</h1>
             </div>
        </div>
   </div>
 </div>

＆＃13;

事件传播和冒泡

2 个答案: