Mouseover and click event conflict

Question

I'm trying to use the on() event to bind both a click and mouseover event to a link, essentially to have hover behaviour on desktop and click for mobile and tablet. The issue I currently have is that both events are triggered at the same time. Is it possible to do this cleanly or should I just add a conditional for the screen width and apply the hover specifically on desktop, click event for mobile? Basic JS fiddle here: http://jsfiddle.net/4wr3da8p/

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

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

EDIT: Updated the jsfiddle to better show what I'm trying to do. I want to toggle the display of an adjacent element, so I don't think CSS pseudo classes will help.

http://jsfiddle.net/4wr3da8p/

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

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

bind event based on device ... for checking device : http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery — Pranav C Balan, Dec 17 '16 at 18:42
Click won't fire when you mouseover, but mouseover will fire when you click. — Scott Marcus, Dec 17 '16 at 18:42
You should include your code in the question and it's also not entirely clear what you're trying to accomplish. hover/tap is a common design issue in multi-device ui but how you approach it depends on the ui. Typically, you want to stick to events that are as 'semantic' and high level as possible — pvg, Dec 17 '16 at 18:48
What is expected result at each `click` and `mouseover` events at `#foo` element? Toggle display of the `#bar` element? — guest271314, Dec 17 '16 at 19:12
@pvg - I expanded on my question further to better illustrate what I'm trying to do. Ultimately, I can just implement click at a breakpoint for desktop, and hover otherwise. I was just curious if this was even necessary. — Tom Russell, Dec 17 '16 at 20:56
I guess what I'm getting at is, is the mouseover really necessary for your design given the added complexity of cross-device implementation. — pvg, Dec 17 '16 at 21:01

Scott Marcus · Answer 1 · 2016-12-17T18:53:10.947

I suspect what you are experiencing is that when you first move the mouse into position for a click (but before the actual click), the "active" class toggles on, but then when you click, that class toggles back to off. Such are the issues with a toggle operation.

If all you are trying to do is apply a certain class when the element becomes active or hovered and remove that class when it's not, you don't need JavaScript at all. You can do that with just CSS and the :hover and :active pseudo-classes. You won't need to worry about both scenarios being true at the same time and cancelling each other out.

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>

This actually doesn't work on Safari Mobile which is fairly finicky about what it considers clickable/activateable elements — pvg, Dec 17 '16 at 19:12

score 0 · Answer 2 · answered Dec 17 '16 at 18:47

0

You can use tap event with jquery for mobile and mouse over for desktop

answered Dec 17 '16 at 18:47

hod caspi

606
1
8
17

score 0 · Answer 3 · answered Dec 17 '16 at 22:23

You can utilize <input type="checkbox"> and <label> elements, change events attached to #bar and #foo elements, css :hover, :checked pseudo classes, general siblings selector ~.

$(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/

Mouseover and click event conflict

3 Answers3