JavaScript kliknięć, Kurki i Hovers

Question

Co staram się osiągnąć to:

Na pulpicie: 1) Hover aby wywołać nakładkę 2) Kliknij, aby aktywować

w dotyku: 1) Naciśnij, aby przywołać nakładka 2) Naciśnij ponownie, aby włączyć

Co mam wymyślić tak daleko jest poniżej. Jednak w przypadku używania urządzenia dotykowego wyzwala ono zdarzenie touchend, a następnie zdarzenie click, co powoduje niepotrzebne uruchamianie zdarzenia kliknięcia nakładki. Jaki jest najlepszy sposób obejścia tego, jeśli w ogóle?

$(".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

wymyśliłem poniżej, która działa dość ładnie - A przy zmianie między touch/pióra i myszy.

W efekcie, dla nawigacji myszy, mouseover "budzi" element i odbiera słuchaczy, a następnie click zostaje obsłużony przez słuchaczy. W przypadku nawigacji dotykowej pierwsze dotknięcie "budzi" element, a drugie dotknięcie zostaje obsłużone przez słuchaczy.

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>

Jeśli ktoś ma jakieś sugestie Uzupełnienia/proszę podążają w górę .. Zostało to daje mi bóle głowy przez kilka dni teraz!