Question

我有一个嵌套在表格单元格内的选择控件。包含表格单元格的表格行有一个onclick事件。当我单击选择控件以更改值时，将触发该行的onclick事件。香港专业教育学院尝试在onchange事件上使用stoppropagation方法，但它似乎没有用。有任何想法吗？以下是我的代码

mount

Answer 1

onchange上select事件触发的事件未触发onclick上的tr事件，但它们的类型不同。他们是两个不同的事件。这也是为什么停止传播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属性或任何其他方法来检测是否单击了选择。

您可以查看this fiddle以获取示例。

Answer 2

当您单击选择标记时，将同时触发onChange和onClick事件！我通过在onChange句柄旁边创建一个onClick处理程序，然后调用e.stopPropogation（）函数来解决此问题。

为我工作！

 <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';

}

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

2 个答案: