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

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>