как остановить событие пузырь

Question

In имеют два div на странице, внешний и внутренний.

Я связываю событие mousemove с внешним div, когда пользователь перемещает mousem во внешнем div, он показывает clientX и clientY мыши.

Также я делаю внутренний div перетаскиваемым, вот пример live .

1) Я не хочу, чтобы триггер события мыши переместился на внешнее при перетаскивании внутреннего элемента div.

Конечно, я могу установить "external.onmousemove = null", когда перетаскиваю внутренний div, но я не думаю, что это лучший способ, так как событие на внешнем div может быть связано другими людьми.

Я пытаюсь использовать event.cancalBubble, но, похоже, он не работает.

2) когда я перетаскиваю внутренний div, он будет выделять текст в Firefox, как его остановить?

Answer 1

Есть две функции, которые можно вызвать, чтобы убедиться, что пузырь событий останавливается:

event.stopPropagation();
event.preventDefault();

Если вы вызываете оба из них, это должно предотвратить выбор как родительского div, так и текста.

Edit:

При более внимательном рассмотрении вашего кода я вижу несколько проблем. Во-первых, вы используете событие onmousemove для регистрации координат мыши во «внешнем» div. Затем вы используете документы onmousemove, чтобы перетащить на «внутренний» div вокруг. Это означает, что если вы остановите распространение события onmousemove, когда начнете перетаскивание, оно никогда не будет пузыриться до узла документа и, в свою очередь, приведет к тому, что перетаскиваемый элемент div никогда не будет перетаскиваться, пока вы фактически не переместите мышь за пределы «внутреннего» элемента div. область.

Одно из решений - установить функцию _mouseMove на подвижном элементе div вместо документа, а затем остановить распространение следующим образом:

/* Remove this */
//document.onmousemove=_mouseMove;
//document.onmouseup=_mouseUp;

/* Add this */
move_ele.onmousemove=_mouseMove;
move_ele.onmouseup=_mouseUp;
e.stopPropagation();
e.preventDefault();

Это заставит его работать так, как вы упомянули, за исключением случаев, когда вы перетаскиваете так быстро, что курсор покидает «внутреннюю» область div, затем он прекращает перетаскивать, пока курсор снова не войдет в область div.

Другое решение состоит в том, чтобы обработать все это в событии «external» div'ов onmousemove, чтобы увидеть, движется ли мышь над этим div, а не «inner» следующим образом:

out.onmousemove=function(e){
    /* Check to see if the target is the "outer" div */
    if(e.target == this){
        e=e==null?window.event:e;
        note.innerHTML=e.clientX+','+e.clientY;
    }
}

Это также будет работать, как вы упомянули, но оно также не позволит обновлять координаты, как только вы наведете курсор на внутренний элемент div, даже если вы не начали перетаскивание.