Mouseover und klicken Sie auf Ereigniskonflikt

Question

Ich versuche, das Ereignis on() zu verwenden, um sowohl ein Klick- als auch Mouseover-Ereignis an einen Link zu binden, im Wesentlichen um Hover-Verhalten auf dem Desktop zu haben und für Mobile und Tablet zu klicken. Das Problem, das ich derzeit habe, ist, dass beide Ereignisse gleichzeitig ausgelöst werden. Ist es möglich, dies sauber zu machen, oder sollte ich nur eine Bedingung für die Bildschirmbreite hinzufügen und den Hover speziell auf dem Desktop anwenden, klicken Sie auf Ereignis für Handy? Grund JS Geige hier: http://jsfiddle.net/4wr3da8p/

$('div').on('click mouseover', 'a', function(e) { 
    e.preventDefault(); 

    $(this).toggleClass('active'); 
}); 

EDIT: die jsfiddle Aktualisiert besser zu zeigen, was ich versuche zu tun. Ich möchte die Anzeige eines angrenzenden Elements umschalten, daher glaube ich nicht, dass CSS-Pseudoklassen helfen werden.

http://jsfiddle.net/4wr3da8p/

$('div').on('click mouseover', 'a', function(e) { 
    e.preventDefault(); 

    $('.content').toggleClass('active'); 
}); 

Answer 1

Ich vermute, was Sie erleben, ist, dass, wenn Sie zuerst die Maus in der richtigen Position für einen Klick bewegen (aber vor dem eigentlichen Klick), die „aktive“ Klasse schaltet auf, aber dann, wenn Sie klicken, diese Klasse schaltet wieder auf aus. Dies sind die Probleme bei einer Umschaltoperation.

Wenn Sie nur versuchen, eine bestimmte Klasse anzuwenden, wenn das Element aktiviert oder deaktiviert wird, und diese Klasse entfernen, wenn dies nicht der Fall ist, benötigen Sie überhaupt kein JavaScript. Sie können das nur mit CSS und den Pseudoklassen :hover und :active tun. Sie müssen sich keine Sorgen darüber machen, dass beide Szenarien gleichzeitig wahr sind und sich gegenseitig auslöschen.

div:active, div:hover { background:yellow; }

<div> 
 
    <p>This will become yellow when you hover over it or when you click it.</p> 
 
    <p>The class will no longer be applied when you move the mouse out of the area or after the click is done.</p> 
 
</div>

Answer 2

Sie Antippereignis mit jquery für für Handy und Maus über Desktop

Answer 3

Sie können <input type="checkbox"> und <label> Elemente nutzen, change Ereignisse an #bar und #foo Elemente verwenden können, css:hover , :checked Pseudo-Klassen, allgemeine Geschwister Selektor ~.

$(function() { 
 
    $("#bar").change(function() { 
 
    if (this.checked) { 
 
     $(this).hide().add("#foo").prop("checked", false); 
 
    } 
 
    }); 
 

 
    $("#foo").change(function() { 
 
    if (this.checked) { 
 
     $("[for=bar]").css("display", "inline-block !important"); 
 
    } 
 
    }); 
 
});

#foo, 
 
#bar, 
 
span.bar, 
 
[for="bar"] { 
 
    display: none; 
 
} 
 
[for="foo"]:hover ~ [for="bar"], 
 
#foo:checked ~ [for="bar"], 
 
[for="foo"]:hover ~ .bar, 
 
#foo:checked ~ .bar { 
 
    display: inline-block; 
 
} 
 
[for="bar"] { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<input type="checkbox" id="foo"> 
 
<label for="foo">foo</label> 
 
<br/> 
 
<br/> 
 
<span class="bar">bar</span>&nbsp; 
 
<input type="checkbox" id="bar"> 
 
<label id="close" for="bar">x</label>

jsfiddle http://jsfiddle.net/4wr3da8p/2/