stopPropagation в Chrome и IE

Question

У меня возникли проблемы с получением stopPropagation для работы в моем dataview. В основном проблема заключается в следующем:

• Выберите узел в DataView, это увольняет выберите, SelectionChange события
• Выбранный узел имеет изображение с событием OnClick, это создает отчет в всплывающем окне.
• Когда изображение кликается, я вызываю stopPropagation, чтобы предотвратить событие, пузырящееся до dataview, что вызовет снятие выделения, события changechange, которые будут запущены.
• stopPropagation только работает в Firefox для меня. Chrome и IE, похоже, не имеют никакого эффекта, поскольку узел отменяется, а нежелательные события запускаются.

Я пробовал следующую функцию на событие OnClick

handleBubbleEvent: function(e) { 
    if (!e) { 
     var e = window.event; 
    } 
    e.cancelBubble = true; 
    e.returnValue = false; 
    if (e.stopPropagation) { 
     e.stopPropagation(); 
    } 
} 

также видели stopImmediatePropagation, preventDefault, stopEvent, но они также не имели никакого эффекта

Я делаю все это внутри Ext XTemplate

<a href="#" title="Report" class="quicklinks journey_report" onClick="handleBubbleEvent(event); Ext.getCmp(...).generateReport(...); return false;"></a> 

Я интересно, если это ExtJS 5 вопрос и тот же код работает старый er версии ExtJS. Я просто не могу остановить событие щелчка, переходящее в dataview, которое затем запускает события отмены выбора и выбора.

Может быть, это вопрос времени/порядка. Я использую событие выбора ExtJS в представлении данных, тогда как в XTemplate я использую собственную функцию слушателя? Я вижу материал в Интернете, ссылающийся на захват/пузырь событий, и поскольку я не веб-разработчик, я борюсь за это.

ОБНОВЛЕНИЕ: Теперь я просматриваю события и захватываю/пузыря, кажется, что захват идет к родительскому объекту и вызывает отмену выбора, затем меняет направление на фактический обработчик кликов, после чего я вызываю stopPropagation но на данном этапе уже слишком поздно. Глядя на создание моего собственного прослушивателя для выбора change с набором target/delegate, так что он вызывается только тогда, когда class! = 'Some class', а затем слушатель на «some class», чтобы обрабатывать то, что я хочу, и stopPropagation, если это делает любой смысл!

Answer 1

Я не думаю, что это имеет какое-либо отношение к stopPropagation(), скорее я верю, что вы действительно меняете «выбор» на клик, следовательно, событие стреляет. Ваш выбор сродни тому, что находится в :focus, и щелчок что-то изменит его. Я предлагаю обходное решение, связанное с поиском цели мероприятия в вашем мероприятии selectionchange и решая, что делать дальше.

document.addEventListener("selectionchange", function(e) {   
    if ((e.target.className).indexOf(".image") > -1) { 
     return false; 
    } else { 
     ... 
    } 
}, false); 

В этом примере предполагается, что на нем изображение щелкнул (тот, который запускает событие на клик, который вы ссылаетесь) имеет класс «.image». Другой, возможно, более эффективной альтернатива (логически говоря) будет:

document.addEventListener("selectionchange", function(e) {   
    if (!((e.target.className).indexOf(".image") > -1)) { 
     // Your original code 
    } 
}, false); 

Answer 2

Попробуйте использовать SetTimeout на любом йот манипуляции, вызванной обработчиком события event.target элемента так, что пузыриться событие завершается до любой манипуляции йота происходит ,

У меня была такая же проблема с Chrome, и (как с вами) Firefox работал.Я обнаружил, что Chrome, похоже, запутывается, если вы модифицируете dom до завершения события.

В моем случае я добавлял два элемента в document.body (холст и набор полей), и к тому моменту, когда хром заштриховал событие, event.target был некорректным (он думал, что «BODY» было событием. target.tagName - НЕПРАВИЛЬНО!). Я завернул манипуляцию часть DOM в SetTimeout так:

setTimeout(()=> 
    { 
     document.body.appendChild(canvas); 
     document.body.appendChild(fieldSet);    
    },0); 

После этого, хром начал сообщать правильную element.target на пузырились событие тела мыши. Возможно, эта же техника поможет вам получить e.stopPropagation(), чтобы сделать свое дело до манипуляции с dom.