Javascript Clicks, Taps and Hovers

Question

I am trying to achieve:

On the desktop: 1) Hover over the overlay 2) Click to activate

When touched: 1) Press to open the overlay 2) Press again to activate

What I have come up with so far is below. However, when using a touch device, it fires the touchend event, and then the click event, this leads to an unnecessary trigger of the overlay event. What is the best way to do this, if any?

 $(".container > .item").on("mouseenter mouseleave", function(e) { $(this).toggleClass("hover"); console.log("hover: " + e.type); }); $(".container > .item > .overlay").on("mouseup touchend", function(e) { console.log("click: " + e.type); }) 

 .item { width: 200px; height: 200px; background: red; display: inline-block; position: relative; } .item.hover > .overlay { display: block; } .overlay { display: none; position: aboslute; top: 0; left: 0; height: 100%; width: 100%; background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="item"> <div class="overlay"> </div> </div> </div> 

Answer 1

I came up with the following, which works pretty well - and when switching between touch / pen and mouse.

In essence, to navigate a mouseover mouse, an element “wakes up” and prepares listeners, then click processed by listeners. For touch navigation, the first press wakes up the element, and the second responder is processed by the listeners.

 var hoverCapture = (function() { var TOUCH_STATE = { 'initial': 0, 'over': 1, 'click': 2 }; var eventTargetDefault = '.hover-layer'; function hoverCapture(selectorScope, eventTarget) { var eventTarget = typeof eventTarget !== 'undefined' ? eventTarget : eventTargetDefault; var $eventTarget = $(selectorScope).find(eventTarget); var touchState = TOUCH_STATE.initial; var previousEventType = ''; $eventTarget.on('mouseenter', function(e) { $(this).addClass("hover"); previousEventType = e.type; }); $eventTarget.on('mouseleave', function(e) { $(this).removeClass("hover"); // Order of events is: // // outside -> .image // touchend, mousenter // // .image -> .image // touchend, mouseleave, mouseenter // // .image -> outside // mouseleave // // When tapping out, we don't receive a touchend // event, since the touchend happens outside of // our scoped listeners if (previousEventType === 'touchend') { touchState = TOUCH_STATE.over; } else { touchState = TOUCH_STATE.initial; } previousEventType = e.type; }); $eventTarget.on('touchend', function(e) { if (touchState === TOUCH_STATE.initial) { touchState = TOUCH_STATE.over; } else { touchState = TOUCH_STATE.click; } previousEventType = e.type; }); $eventTarget.each(function() { this.addEventListener("click", function(e){ if (touchState === TOUCH_STATE.over) { e.stopPropagation(); } previousEventType = e.type; }, true); }); } return hoverCapture; }()); hoverCapture("#gallery1", ".image"); hoverCapture("#gallery2", ".image"); $(".test").on("click", function(e) { alert("Ouch!"); }); 

 .gallery { margin: 5px; } .image { width: 100px; height: 100px; background: grey; margin: 0 -4px -4px 0; display: inline-block; } .image .overlay { height: 100%; width: 100%; background: red; display: none; position: relative; } .image.hover .overlay { display: block; } .test { width: 25%; height: 25%; position: absolute; right: 0; background: purple; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gallery" id="gallery1"> <div class="image"> <div class="overlay"> <div class="test"></div> </div> </div> <div class="image"> <div class="overlay"> </div> </div> <div class="image"> <div class="overlay"> </div> </div> <div class="image"> <div class="overlay"> </div> </div> </div> <div class="gallery" id="gallery2"> <div class="image"> <div class="overlay"> <div class="test"> </div> </div> </div> <div class="image"> <div class="overlay"> </div> </div> <div class="image"> <div class="overlay"> <div class="test"> </div> </div> </div> <div class="image"> <div class="overlay"> </div> </div> </div> 

If anyone has any add-ons / suggestions, please continue to follow up .. This gave me headaches for several days!