2

In Chrome and IE, the following code enables sorting list items and the click event does not get triggered when you release the mouse button. However, in Firefox (47.0 and earlier versions), the click event also fires.

Thanks to this question it is clear that using the helper: "clone" option (docs) is an easy and efficient fix to stop getting the click event triggered. But time has marched on from that question and browsers have been updated and now I'm wondering if the modern Chrome/IE have the correct handling and Firefox should plan on fixing theirs.

My question is: Which browser is 'doing it right'? Should the click event be being fired in FF after sorting or are both approaches "correct" and just have to be compensated for? Are Chrome and IE doing a non-standard hack?

Thanks for increasing knowledge about this confusing issue and divergent browser approaches.

A jsfiddle displaying the behavior until FF changes its ways.

<ol id='sortableFields'>
    <li>Click to reorder 1</li>
    <li>Click to reorder 2</li>
</ol>

<script>
$("#sortableFields").on("click", "li", function() {
    alert("This is the problem seen in ff");
});
$("#sortableFields").sortable({
    items: "li",
 /* helper: "clone",  A WAY TO FIX IT */
    update: function(event, ui) {
        console.log("Updating")
    })
});
</script>

Another way to work around the issue is to wrap the list with a <div> element and then listen for the click event on that element and use event.stopPropogation() in the sortable's update method. But who needs that headache?

Community
  • 1
  • 1
veeTrain
  • 2,915
  • 2
  • 26
  • 43
  • 1
    Close-voting as "which method is better", as it's currently worded, can't be answered authoritatively. As for getting more consistent behaviour, consider using `mousedown` and `mouseup` directly – blgt Jun 10 '16 at 15:23
  • @blgt - I'm o.k. to close it if there aren't any suggestions to shed some light on the inner working of browsers (specifically Firefox). It looks like Chrome and IE have changed ther behavior since the linked question was posted in 2009 so I'm asking if those browsers had a bug fixed (and Firefox still has a problem) or if both approaches are valid and we must code around it. I am not asking if one method is better than another. I believe the `helper:'clone'` option has already won that debate and I agree. – veeTrain Jun 10 '16 at 16:55

0 Answers0