jquery selectable - Div и Canvas

Question

Я использую jquery selectable plugin и запускаю его в следующую ситуацию.

Пожалуйста, обратите внимание на этот образ

html5 холст заключена внутри DIV. Но холст больше, чем размер DIV. Круглый прямоугольник всегда имеет размер DIV. Холст больше, скажем, 10 пикселей с каждой стороны границы DIV. В приведенном выше изображении синяя граница представляет холст.

У меня есть jquery, который можно выбрать, и он выбирает все объекты класса = "mt_obj".

DIV присваивается этот класс, но холст не назначен этому классу.

Побочный эффект, когда я использую выделение выделения (резиновая лента), и если он попадает в область холста, тогда объект выбирается. Поэтому, если я нажимаю между синей рамкой и округленной квадратной границей, объект выбирается. Желаемое поведение - это выбирать, только когда пользователь нажимает на серый квадрат.

Адрес электронной почты: HTML код. Есть ли способ выбора jquery или выбора класса, чтобы избежать выбора, если он является объектом canvas?. Я думаю, что выбор canvas распространяется на 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

Это немного выстрела в темноте, но я предполагаю, что выбор использует любого или все наведения мыши, отведение указателя мыши, MouseEnter и MouseLeave событий, чтобы вызвать выделение. Имея это в виду, вы можете быть в состоянии сделать что-то вроде этого после того, как вы называете selectable:

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

Вы могли бы попробовать mouseenter и mouseleave события там тоже.