Javascriptをクリック、タップやホバー

Question

私は何を達成しようとしていることです：デスクトップで

：1）ホバーオーバーレイ2を起動するために）タッチで

を有効にするにはクリック：1）起動するタップオーバーレイ2）もう一度タップして有効にしてください

私がこれまで出てきたことは以下の通りです。しかし、タッチデバイスを使用すると、touchendイベントとclickイベントの両方が発生するため、オーバーレイクリックイベントが不必要に発生します。もしあれば、これを取り巻く最善の方法は何ですか？

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

私はむしろうまく働く、以下を思い付いた - とタッチ/ペンとマウスの間で変更するとき。

実際には、マウスのナビゲーションでは、mouseoverが要素を「起動」し、リスナーを準備すると、clickがリスナーによって処理されます。タッチナビゲーションの場合、最初のタップは要素を「起動」し、2番目のタップはリスナーによって処理されます。

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>

誰もが任意の追加/提案を持っている場合は。これは、今日のために私に頭痛を与えてきたのフォローアップでください！