通过左键或右键单击选择哪个元素？

Question

我有几个用模板创建的文件夹图标：

<div id='folderTemplate' class="template openclosed_folder_icon subfolder" style="position:absolute; top:'30'; left:'100';">
       <img class="folder_icon" src="images/folder_closed.png"  alt="closed folder"  />
       <div class="folder_label" >name</div> 
       <img class='folder_redX' src='images/redX.png' alt='redX' title='Delete this gallery' />
</div> 

文件夹如下所示：

如果我左键单击大多数文件夹，进入jQuery的e.target是上面的第一个<img>元素，就在开始<div>标记的下方。如果我在启用Chrome调试时右键单击这些文件夹，要检查它们，选择的元素就是第一个<img>元素。但是当我左键单击它或右键单击它时，其中一个文件夹会给我外部<div>。有谁知道发生了什么？什么控制通过左击或右击实际选择哪个元素？

由于

Answer 1

我最好的猜测是，<img />元素可能有不可选择的样式：

pointer-events: none;

上面的代码将确保鼠标指针根本看不到该图像，或者出于任何原因。

在这里查看：

input {padding: 25px 35px;}
div {pointer-events: none; position: relative; top: 15px; background: #fff; display: inline-block; left: -205px; z-index: 9999;}

<input type="button" value="Hello, World! Click Me?" />
<div>See through! Click on me!</div>

在上面的代码片段中，如果您尝试单击<div />，则无法执行此操作，指针事件将直接转到其后面的元素。从逻辑上讲，鼠标根本看不到<div />！大多数原因是因为它背后的CSS，你没有提供，可能会回答这个问题！ :)

为了确保这一点，我还在z-index: 999;添加了<div />。 <div />仍然无法选择。

Answer 2

我解决了这个问题，但事实并非如此。问题是左侧文件夹的模板div向右延伸得太远并且与右侧的文件夹重叠：

所以当我以为我点击了图片文件夹时，我实际上点击了Gallery文件夹的模板div，这阻止了鼠标点击到达images文件夹。点击不会显示图像文件夹的模板div。它正在调出覆盖图像文件夹的Gallery文件夹的模板div。修复是使模板div的宽度足以容纳文件夹名称，以便不再有文件夹重叠。