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

Answer 1

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

然后您仍然可以使用以下方式设置按钮：

.button[disabled] or button[disabled]

希望这有帮助。

Answer 2

原因是被点击的元素SPAN是事件target，而不是BUTTON，即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>

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

2 个答案: