js点击子元素不触发父元素

要实现点击子元素不触发父元素的效果，可以使用事件委托。在父元素上绑定点击事件，并通过事件对象的 target 属性判断是否是子元素触发的事件。如果是子元素触发的事件，则可以阻止事件冒泡，从而避免触发父元素的点击事件。

示例代码如下：

var parent = document.getElementById('parent');

parent.addEventListener('click', function(event) {
  if (event.target !== parent) {
    event.stopPropagation();
    // 处理子元素点击事件的逻辑
  }
});

在这个示例中，我们在父元素上绑定了一个点击事件，然后在事件处理函数中判断事件触发的目标是否是父元素本身。如果不是，则阻止事件冒泡并处理子元素的点击事件逻辑。这样就可以实现点击子元素不触发父元素的效果了。

相关问题

js点击父元素不触发子

您好！对于这个问题，您可以使用事件委托（Event Delegation）来解决。事件委托是将事件监听器绑定在父元素上，然后通过事件冒泡机制来处理子元素的事件。

具体的做法是，给父元素绑定一个点击事件监听器，然后在监听器中判断事件源（event.target）是不是子元素。如果是子元素，可以选择不执行相应的操作，从而实现点击父元素不触发子元素的效果。

以下是一个示例代码：

// 获取父元素
var parentElement = document.getElementById('parentElementId');

// 给父元素添加点击事件监听器
parentElement.addEventListener('click', function(event) {
  // 判断事件源是否是子元素
  if (event.target !== parentElement) {
    // 如果是子元素，则不执行操作
    return;
  }
  
  // 执行父元素的点击操作
  // ...
});

请注意，这里的 `parentElementId` 是父元素的 id，您需要将其替换为实际的元素 id。

希望这个解决方案对您有帮助！如果还有其他问题，请随时提问。

小程序父元素有bindtap，子元素有bindtap，点击子元素如何避免父元素事件触发

当您在子元素上绑定了事件时，可以使用事件对象的 `stopPropagation()` 方法来停止事件冒泡，从而避免父元素事件的触发。

例如，您可以在子元素的 `bindtap` 事件中添加 `event.stopPropagation()`，如下所示：

// wxml
<view bindtap="parentTap">
  <view bindtap="childTap">
    点我
  </view>
</view>

// js
Page({
  parentTap: function() {
    console.log('父元素事件');
  },
  childTap: function(event) {
    console.log('子元素事件');
    event.stopPropagation();
  }
})

这样，在点击子元素时，只会触发子元素的事件，并且不会触发父元素的事件。