hammer.js: stopPropagation() not working with tap event

var element = document.getElementById(‘test_el’); var hammertime = Hammer(element).on(‘tap’, function(event) { element.parentElement.href = null; alert(‘hello!’); });

// Ftfy

You’re right with 1.

With 2. I disagree. My take:

• You should be able to add multiple listeners to the same event and not override previously added listeners
• To remove a listener, you should know which listener to remove, this is ok
• For anonymous listener functions, my impression was that leaking memory of keeping handlers of removed elements was a problem in oldIE and moder browsers can GC unreferenced functions fine. Correct me if I’m wrong
• Handling the receiver of the function call has nothing to do with the DOM, that’s just how this works in JavaScript

I haven’t seen anyone recommend el.onclick over el.addEventListener for years, and it seems all the libraries are using addEventListener (or attachEvent as a fallback) anyways. Do you have any references?

stopPropagation just stops the event from bubbling, not the other events from firing. Like when you call stopPropagation on a mouseover event, it doesnt stops mouseout or something. Preventing a link from getting clicked you can only do this with calling preventDefault on the Click event. (correct me if im wrong)

the ev.preventDefault() doesnt make any sense actually in Hammer.js, since the browsers dont have a tap event implemented, but it is created by the domEvents that hammer uses. The ev.gesture.preventDefault() makes more sense, it calls the mouse or touch event that hammer used for the detection. This could be touchstart or mousemove etc.

element.on("tap", function(ev) {
// stops bubbling the tap event to its parents. so you can create nested events.
ev.stopPropagation();    

// prevents the browser from doing it's native 'tap' implementation.
// doesnt make any sense, only for the drag events, since most browsers 
// support dragstart-drag-dragend
// it is in hammer, because document.createEvent adds these, and Hammer uses 
// this for creating DOM events.
ev.preventDefault(); 

// stops the source event (in ev.gesture.srcEvent) from bubbling. 
// the source event could be touchstart, touchmove, mousemove etc.
ev.gesture.stopPropagation();

// prevents the source event (in ev.gesture.srcEvent) from doing it's native behavior.
// when you use this, you can make the element blocking, 
// because touchstart-touchmove let the browser scroll
// if you dont prevent the default action. this could be called when you are 
// using the drag and transform events,
// but hammer does this for you in most cases
ev.gesture.preventDefault();

});