1

I have this code, which adds class active when another element is hovered:

$(document).on('mouseenter', '.hover-cont', function(e) {

    if($(window).width() <= 776) return false;
        e.preventDefault();
        .....addClass('active');
        return false;
    });
});

The problem is that, the hover event is triggered and on tap mobile event, but I have click event for the same element which triggers another logic.

For now, I am using $(window).width() <= 776), but is there a way to check, which type of event is fired ?

EDIT: The click event:

$(document).on('click', '.click-el', function(e) {
    e.preventDefault();
    // do some logic

    return false;
});
gdfgdfg
  • 3,181
  • 7
  • 37
  • 83
  • `hover` is a CSS pseudo class, not a Javascript event – Ben Carey Jul 01 '19 at 22:35
  • $(el).hover(), https://www.w3schools.com/jsref/event_onmouseover.asp, – gdfgdfg Jul 01 '19 at 22:37
  • https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event – gdfgdfg Jul 01 '19 at 22:38
  • `mouseover` and `hover` are not the same. `mouseover` is a JavaScript event, `hover` is a CSS pseudo class – Ben Carey Jul 01 '19 at 22:39
  • 1
    To get the type of event that has been fired you can use `event.type` but I don't think this will help you... – Ben Carey Jul 01 '19 at 22:41
  • What you think I mean by hover event jQuery ? Read the question again, please "Check is tap or hover event - jQuery ". Where you read here `:hover` pseudo class, really ....https://api.jquery.com/hover/ – gdfgdfg Jul 01 '19 at 22:42
  • `hover` is a poorly named method by jQuery for exactly this reason, there is no such event as `hover` in JavaScript. I have never come across that method in my ten+ years of writing jQuery... Regardless, as I mentioned, you can use `event.type`, or in your case, `e.type` to determine what event was fired – Ben Carey Jul 01 '19 at 22:44
  • Thanks for the info and help, BUT IT IS JQUERY EVENT in this case and I mean that, like there are React events, too ;). – gdfgdfg Jul 01 '19 at 22:46
  • For the context of the library/framework, it is. – gdfgdfg Jul 01 '19 at 22:48
  • 1
    I understand what you are saying, but there is no such thing as a JavaScript `hover` event, or a jQuery `hover` event. There is a jQuery **method** called `hover` that serves as a wrapper for the JavaScript `mouseenter` and `mouseleave` events. See the description in the jQuery documentation: "The .hover() method binds handlers for both `mouseenter` and `mouseleave` events" – Ben Carey Jul 01 '19 at 22:49
  • 1
    In other words, it is a shorthand wrapper for two events `mouseenter` and `mouseleave`. Does that make sense? – Ben Carey Jul 01 '19 at 22:51
  • As a side note, I would strongly discourage using `$(window).width() <= 776` to determine whether the screen is a mobile (assuming this is what you are using it for). This is extremely inaccurate because a) the width of the screen cannot be used to determine the type of device, and b) the returned integer from this code will not necessarily accurately represent the media breakpoint – Ben Carey Jul 01 '19 at 22:56
  • 1
    To expand on the above comment; aside from the width of a screen having no relevance to the type of device a user is using, the media query `(max-width: 776px)` is not the same as `if ($(window).width() <= 776)` – Ben Carey Jul 01 '19 at 22:59
  • 2
    In order to solve your problem, you need to post the jQuery you are using to listen to both events i.e. `tap` and `mouseenter`/`mouseleave`. Once I see this, I will be able to assist you further :-) – Ben Carey Jul 01 '19 at 23:00
  • thanks I have edited the question. Actually `e.type` is not what I want, because it says `mouseenter` (of course) for this event, but AND for the tap event. I have searched a lot, that's why I am asking. I need to have a way to know exactly is `tap` or `mouseenter`. – gdfgdfg Jul 01 '19 at 23:11
  • Okay, we are getting there... However, I need to know exactly what it is you are trying to achieve... You have a `mouseenter` event on an element, and you also have a `click` event on an element. Are you saying you want to prevent the `mouseenter` event when the `click` event is fired? That wouldn't make sense because you have to `mouseenter` in order to be able to `click`... You have also mentioned `tap` but you do not have any registered listeners for `tap`... Incidentally, `tap` is a jQuery Mobile event, it is also not a valid JavaScript event (just for your info) – Ben Carey Jul 01 '19 at 23:17
  • ok, I am using `var tap = ("ontouchstart" in document.documentElement);`, thanks Ben for your help and for the information :) . – gdfgdfg Jul 01 '19 at 23:29
  • 1
    That still doesn't explain enough about what the issue is and what you are trying to achieve... I need more information in order to help you – Ben Carey Jul 01 '19 at 23:37
  • I think this question might be helpful. https://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both – Eric McWinNEr Jul 02 '19 at 02:01

0 Answers0