如何防止<button />元素上的事件传播？

我有一个button元素与span标签中：如何防止<button />元素上的事件传播？

<button onClick={this.doSomething.bind(this)}> 
    <span>Some text</span> 
</button>

的doSomething功能如下：

function doSomething(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
    if(e.target.classList.contains("disabled")){ 
     return false; 
    } 

    // Continue with button action... 
}

当按钮具有disabled类我不想按钮开火。目前，当按钮的边缘被点击时，它不会被触发。但是，当点击按钮的内部部分（文本所在的位置）时，它会触发 - 我想避免这种情况 - 我该怎么做？

来源

2017-05-06 JoeTidee

我建议使用一个按钮的disabled属性，而不是类。 disabled attribute

那么你仍然可以样式的按钮使用：

.button[disabled] or button[disabled]

希望这有助于。

来源

2017-05-06 22:32:13 Szczups

你可以用CSS规则处理：

button.disabled span { 
    pointer-events: none; 
}

甚至：

button.disabled * { 
    pointer-events: none; 
}

function doSomething(e){ 
 
    
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    if(e.target.classList.contains("disabled")){ 
 
     return false; 
 
    } 
 
    
 
    console.log('triggered', e.target); 
 

 
    // Continue with button action... 
 
}

button.disabled span { 
 
    pointer-events: none; 
 
}

<button onclick="doSomething(event)" class="disabled"> 
 
    <span>Some text (Disabled)</span> 
 
</button> 
 

 
<button onclick="doSomething(event)" class=""> 
 
    <span>Some text</span> 
 
</button>

来源

2017-05-06 22:29:23 Leguest

原因是被点击的元素SPAN是事件target，而不是按钮，它是currentTarget。检查类的event.currentTarget代替：

function doSomething(e){ 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    console.log('triggered', e.target, e.currentTarget); 
 
    if (e.currentTarget.classList.contains("disabled")) { 
 
    console.log('Exit'); 
 
    return false; 
 
    } 
 
    console.log('Continue'); // Continue with button action... 
 
}

button.disabled span { 
 
    pointer-events: none; 
 
}

<button onclick="doSomething(event)" class="disabled"> 
 
    <span>Some text</span> 
 
</button>

来源

2017-05-06 22:39:37

如何防止<button />元素上的事件传播？

回答

相关问题