不让父元素的点击事件影响到子元素

要实现不让父元素的点击事件影响到子元素，可以在子元素上添加一个点击事件，然后在该事件的回调函数中调用 `event.stopPropagation()` 方法。这样当子元素被点击时，该事件不会继续传递到父元素，从而避免了父元素的点击事件影响到子元素。以下是一个示例代码：

<div onclick="console.log('parent element clicked')">
  <button onclick="event.stopPropagation(); console.log('child element clicked')">Click me</button>
</div>

在上面的代码中，当点击按钮时，会先触发按钮的点击事件，然后调用 `event.stopPropagation()` 方法，阻止事件继续传递到父元素，从而避免了父元素的点击事件影响到子元素。

相关问题

vue不让父元素的点击事件影响到子元素

在 Vue 中，可以通过使用事件修饰符 `.stop` 来阻止点击事件向上传递。具体实现方式如下：

<template>
  <div @click="parentClick">
    <button @click.stop="childClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    parentClick() {
      console.log('parent element clicked')
    },
    childClick() {
      console.log('child element clicked')
    }
  }
}
</script>

在上面的代码中，当点击按钮时，会先触发按钮的点击事件，然后使用 `.stop` 事件修饰符阻止事件向上传递到父元素，从而避免了父元素的点击事件影响到子元素。

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

你可以通过阻止事件冒泡来实现这个功能。在父元素的事件处理函数中，使用 `event.stopPropagation()` 方法来阻止事件继续向上传播，这样子元素的事件就不会触发了。例如，下面的代码可以防止点击子元素时触发父元素的点击事件：

<div id="parent">
  <div id="child"></div>
</div>

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

  parent.addEventListener('click', function(event) {
    console.log('Parent clicked');
  });

  child.addEventListener('click', function(event) {
    console.log('Child clicked');
    event.stopPropagation();
  });
</script>

在上面的代码中，当点击子元素时，只会触发子元素的事件处理函数，而不会触发父元素的事件处理函数。