为什么在chrome覆盖节点时未触发click事件

Question

HTML：

#title {
        position: absolute;
    }
#entity {
        position: relative;
        display: none;
        background: white;
    }

---

<div id="title" contenteditable=true>aaaaa</div>
<div id="entity">bbbb</div>

JavaScript的：

$('#title').focus(function(){
    console.log('focus');
    $('#entity').show();
})
$('#title').click(function(){
    console.log('click');
})

单击#title时，仅显示控制台'焦点'。为什么点击事件不会触发？

Answer 1

要使click event同时触发mousedown和mouseup必须在同一个元素中触发，在你的情况下，在mousedown之后会触发焦点事件导致overlay元素出现，因此在{{{{{ 1}}元素因此点击事件未完成

Click

  

点击事件在指点设备按钮（通常为   按下并释放单个元素上的鼠标按钮。

#entity

演示：Fiddle

Answer 2

因为click类似于mousedown和mouseup的组合。您有机会在#entity上进行鼠标操作之前显示#title，因此不会启动任何点击。将.click更改为.mousedown以获得所需效果

DEMO