单击时在我的关闭图标周围出现框架

Question

我有一个带有“x”图像背景的div，我可以点击它来关闭父元素：

它周围的代码是：

function remove_cell(el) {
   $(el).closest("div.cell").remove();
}

<div class="handle">
    <div class="grip"></div>
    <div class="closeX" onclick="remove_cell(this)"> </div>
</div>

但是当我点击“x”div时，我会用手柄在它周围找到那个丑陋的框架。释放鼠标按钮时删除工作，但是有人知道在mousedown上放置这个框架的内容以及如何摆脱它吗？

由于

Answer 1

在您的代码中，停止事件传播或返回false以阻止点击单击弹出窗口下方的元素

function remove_cell(el) {
   $(el).closest("div.cell").remove();
   return false;
}

编辑：实际上，由于您使用的是内联代码（不是最好的主意），因此需要内联：

<div class="closeX" onclick="remove_cell(this); return false"> </div>

Answer 2

问题原来是这个内部的较大的div（上面的橙色框）已经contenteditable = true。显然，在这种情况下，如果单击图像元素，浏览器（我使用FF）会抛出此选择框，即使图像是您单击的div的背景（我的div.closeX）。我通过给sub div（div.handle）赋予属性contenteditable = false来摆脱它，它仍然可以将橙色div中的内容保留为可编辑的内容。

使用：

<div class="cell " contenteditable="true">
   <div class="handle" contenteditable="false">
    <div class="closeX" onclick="remove_cell(this)"> </div>
   </div>
</div>