jquery 可选 - Div 和 Canvas

Question

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

请看这张图片

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

我有 jquery 可选，它选择了 class="mt_obj" 的所有对象。

DIV 被分配了这个类，但画布没有被分配这个类。

副作用是当我使用选取框选择（橡皮筋）时，如果它落在画布区域中，那么对象就会被选中。因此，如果我在蓝色边框和圆角方形边框之间单击，对象就会被选中。期望的行为是仅在用户单击灰色圆角方块时进行选择。

这是 HTML 代码。 如果它是画布对象，在 jquery 可选择或类选择中是否可以避免选择？。我认为画布选择会传播到 DIV，因为 div 是画布的父级。

<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 事件。