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

Question

我有一个 button 元素，里面有一个 span 标签：

<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 class 我不希望按钮触发。目前，当单击按钮的边缘时，它不会触发。但是，当单击按钮的内部部分（文本所在的位置）时，它会触发 - 我想避免这种情况 - 我该怎么做？

Answer 1

你可以用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>

Answer 2

我建议使用按钮的禁用属性而不是 class。 disabled attribute

那么您仍然可以使用以下方式设置按钮样式：

.button[disabled] or button[disabled]

希望对您有所帮助。

Answer 3

原因是单击的元素 SPAN 是事件 target，而不是 BUTTON，后者是 currentTarget。检查 class 代替 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>

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

How to prevent event propagation on a <button /> element?

javascript

button

event-propagation