解决：点击子元素（子元素自己也绑定了事件）不触发父元素绑定的事件

在子元素的事件处理函数中，可以使用 `event.stopPropagation()` 方法来阻止事件继续向父元素冒泡，从而避免触发父元素绑定的事件。

示例代码如下：

<div id="parent">
  <button id="child">点击我</button>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  parent.addEventListener('click', () => {
    console.log('父元素被点击了');
  });

  child.addEventListener('click', (event) => {
    console.log('子元素被点击了');
    event.stopPropagation(); // 阻止事件冒泡
  });
</script>

在上述代码中，当点击子元素时，子元素的事件处理函数会先执行，并且使用 `event.stopPropagation()` 方法来阻止事件冒泡，从而避免触发父元素的事件处理函数。

相关问题

在uni中点击父元素不希望子元素也触发父元素的事件

在uni-app中，你也可以通过阻止事件冒泡来实现这个功能。与普通的Web开发类似，你可以在父元素的事件处理函数中，使用 `event.stopPropagation()` 方法来阻止事件继续向上传播，这样子元素的事件就不会触发了。

不过需要注意的是，uni-app中的事件对象是 `uni.event`，而不是普通的Web开发中的 `event`。因此，你需要对代码做一些调整，如下所示：

<template>
  <view class="parent" @tap="handleTapParent">
    <view class="child" @tap="handleTapChild"></view>
  </view>
</template>

<script>
  export default {
    methods: {
      handleTapParent(uniEvent) {
        console.log('Parent clicked');
      },
      handleTapChild(uniEvent) {
        console.log('Child clicked');
        uniEvent.stopPropagation();
      }
    }
  }
</script>

在上面的代码中，我们使用了 `@tap` 指令来绑定父元素和子元素的点击事件。在父元素的事件处理函数中，我们使用了 `uniEvent.stopPropagation()` 方法来阻止事件冒泡。这样当点击子元素时，只会触发子元素的事件处理函数，而不会触发父元素的事件处理函数。

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

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

示例代码如下：

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

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

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