如何为div及其内部图片绑定不同点击事件并阻止事件冒泡

你碰到的是事件冒泡的问题：点击图片时，事件会向上传递到父级div，导致div的show('1')也跟着触发。preventDefault()是用来阻止元素默认行为（比如a标签跳转）的，对事件冒泡没用；return false在非内联事件里能同时阻止默认和冒泡，但内联写法里得正确处理事件对象才行。

直接改图片的内联点击事件就行，给它加上阻止冒泡的代码：

<div class="col-md-12 m-1 info rounded bg-light hand" id="result1" onclick="show('1')">
Text <b>textssssssss</b><br/> Description <b>desc</b>
<img src="./img/icons/magnify.png" title="Details" style="width: 32px" onclick="event.stopPropagation(); window.open('details.php?id=1','_blank');"/>
</div>

要是需要兼容老版本浏览器，就把事件对象的获取方式改一下：

<img src="./img/icons/magnify.png" title="Details" style="width: 32px" onclick="(event || window.event).stopPropagation(); window.open('details.php?id=1','_blank');"/>

这样点击图片时，只会执行打开新窗口的操作，不会触发div的show('1')了。

内容的提问来源于stack exchange，提问作者www.friend0.in