正在取消选择控件的onchange事件的传播

Cancelling propagation of the onchange event of a select control

本文关键字：onchange 传播 事件 控件 取消 选择      更新时间：2023-09-26

我有一个嵌套在表单元格中的选择控件。包含表单元格的"表"行具有onclick事件。当我单击select控件来更改值时，将触发该行的onclick事件。

我已经尝试在onchange事件上使用stoppropagation方法，但它似乎不起作用。

下面是我的代码

xxxxxxx.Helper.DDGoto = function (o, e) {
    e.stopPropagation();
    var path = $(o).val();
    if (path != null) {
        this.Goto(path);
    }
}

   <tr onclick="somemethod()">
     <td>some text</td>
     <td>
      <select onchange="xxxxxxx.Helper.DDGoto(this, event)">some options</select>
    </td>
</tr>

由select上的onchange事件触发的事件不是在tr上触发onclick事件，它们不属于同一类型。这是两个不同的事件。这也是为什么停止传播onchange事件不会停止要触发的onclick事件的原因。

相反，您应该在onclick处理程序中检查是否单击了select元素：

somemethod = function (event) {
  if (event.target.nodeName === 'SELECT') {
    // The select was clicked, stopping...
    return;
  }
  // The select was not clicked, go ahead...
}

要在处理程序中获取事件，您需要将声明更改为：

<tr onclick="somemethod(event)">

我使用了nodeName属性作为示例，但您也可以使用目标的type属性或任何其他方法来检测是否单击了选择。

你可以看看这个小提琴作为例子。

当您单击select标记时，onChange和onClick事件都会被触发！我通过在onChange句柄旁边创建一个onClick句柄，然后调用e.stopPropagation（）函数来解决这个问题。

为我工作！

 <select (click)="StopPropogation($event)"  (change)="textureChanged($event,i)" class="form-control" id="sel1">
                            <option  selected="isTextureSolid(nodule.texture)">solid</option>
                            <option selected="isTexturePartSolid(nodule.texture)">part-solid</option>
                            <option selected="isTextureNonSolid(nodule.texture)">non-solid</option>
                            </select>

Javascript代码：

StopPropogation(e: Event) {
  e.stopPropagation();
  console.log('Click event stopped from propogating');
}
textureChanged(e: Event, i: number) {
  e.stopPropagation();
  console.log('textTure Changed');
  let btnId = 'save' + i.toString();
  document.getElementById(btnId).style.display = 'block';
  document.getElementById(btnId).style.visibility = 'visible';
}
相关文章：