Inhalt Editierbar innerhalb eines Karussells, was die Ereignisausbreitung verursacht

Question

Ich erstelle dynamisch ein editierbares div mit der folgenden Zeile.

<div class='reflection-field' contenteditable="true" data-number="${index}"></div> 

Erwartet: Wenn ich auf das gerenderte Div klicke, erwarte ich, dass es den Cursor am Anfang zeigt.

Problem: Dieses div ist innerhalb eines "Slide" div eines Karussells. Wenn ich also auf dieses editierbare div-Element klicke, wird das Ereignis weitergeleitet und das Ereignis im übergeordneten Karussell aktiviert, das das Ereignis "Grab Slide" aktiviert. Dies führt zu einem "Bewegen" -Mauszeiger und KEIN Cursor innerhalb der bearbeitbaren.

Ich benutze jQuery & Eule Karussell 2 in diesem Projekt.

$(".reflection-field").click(function(event) { 
    event.stopPropagation(); 
}); 

und diese

$(".owl-carousel").on("click",".reflection-field", function(event) { 
    event.stopPropagation(); 
    propStopped(event) 
}); 

function propStopped(event) { 
if (event.isPropagationStopped()) { 
    console.log("called"); 
} else { 
console.log("not called"); 
} 
} 
//called 

Aber, es ist nicht passiert. Werde die Hilfe wirklich schätzen.

jsfiddle: https://jsfiddle.net/pr2wn6ug/

Answer 1

Ok, hier ist der Deal.

Der "mousedown" erinnert an den Greifer im Owl-Carousel-2.

So machte es

arbeiten

$(".reflection-field").on("click tap mousedown", function(event) { 
    event.stopPropagation(); 
});