jquery 可选 - Div 和 Canvas

Question

我正在使用jquery可选插件并将其运行到如下情况。

请看一下这张图片

html5 Canvas 包含在 DIV 内。但 Canvas 故意大于 DIV 尺寸。圆角矩形始终具有 DIV 的大小。 Canvas 在 DIV 边界的每一侧都大了 10 个像素。在上图中，蓝色边界代表 Canvas 。

我可以选择 jquery，它会选择所有属于“mt_obj”类的对象。

DIV 分配有此类，但 Canvas 未分配有此类。

副作用是当我使用选取框选择(橡皮筋)时，如果它落在 Canvas 区域中，则该对象将被选中。因此，如果我在蓝色边框和圆角方形边框之间单击，则会选择该对象。所需的行为是仅当用户单击灰色圆角正方形时才进行选择。

这是 HTML 代码。 如果它是 Canvas 对象，jquery 可选择或类选择是否有办法避免选择？。我认为 Canvas 选择会传播到 DIV，因为 div 是 Canvas 的父级。

<div style="display: block; position: absolute; 
top: 181px; left: 217px; width: 398px; height: 34px; z-index: 1;" 
class="mt_obj ui-resizable ui-draggable ui-selected ui-resizable-autohide">
<canvas  style="position: relative; 
top: -10px; left: -17.4561px;" width="432" height="54">
</canvas>
</div>

Answer 1

这有点盲目，但我猜测 selectable 使用任何或所有 mouseover、mouseout、mouseenter 和 mouseleave 事件来触发选择。考虑到这一点，您可以在调用 selectable 后执行类似的操作:

$("div.mt_obj canvas").bind("mouseover mouseout", function(event){
  event.stopPropagation();
}); 

您也可以尝试其中的 mouseenter 和 mouseleave 事件。