如何在单击<div>中的<button>时禁用<div>上的单击

在单击<div>中的<button>时禁用<div>上的单击，可以通过以下几种方式实现：

1. 使用JavaScript事件处理程序：可以通过在<button>元素上添加onclick事件处理程序，然后在处理程序中禁用<div>上的单击事件。具体实现代码如下：

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

在上述代码中，<button>元素的onclick事件处理程序中使用event.stopPropagation()方法来阻止事件冒泡，从而阻止<div>上的单击事件触发。

1. 使用JavaScript事件监听器：可以使用JavaScript中的事件监听器来实现禁用<div>上的单击事件。具体实现代码如下：

<div id="myDiv">Click me</div>
<button id="myButton">Disable div click</button>

<script>
  var div = document.getElementById('myDiv');
  var button = document.getElementById('myButton');

  button.addEventListener('click', function(event) {
    event.stopPropagation();
  });
</script>

在上述代码中，通过addEventListener方法为<button>元素添加了一个点击事件监听器，当点击<button>时，事件监听器中的回调函数会被执行，并通过event.stopPropagation()方法阻止事件冒泡，从而禁用了<div>上的单击事件。

1. 使用CSS pointer-events属性：可以使用CSS的pointer-events属性来禁用<div>上的单击事件。具体实现代码如下：

<style>
  .disabled {
    pointer-events: none;
  }
</style>

<div id="myDiv">Click me</div>
<button onclick="document.getElementById('myDiv').classList.add('disabled')">Disable div click</button>

在上述代码中，通过为<div>元素添加一个名为disabled的CSS类，该类设置了pointer-events: none;，从而禁用了<div>上的单击事件。当点击<button>时，通过JavaScript代码将disabled类添加到<div>上。

无论使用哪种方法，都可以在单击<button>时禁用<div>上的单击事件。