How to change a event listener from hover to click depending on device width on javascript-CodePudding

i am facing issue on jquery while using hover listener event, the code is just working on desktop while on mobile i can't get it to work with the hover listener.So i just wanna implement click function instead of hover when the site is being displayed on mobile and hover on pc/laptop.I am sharing my code below. Also i am using blastjs and animate.css for text animation.

Header Element for the animation

<h2>About Me..</h2>

Jquery Code

$(document).ready(function () {
  $("h2").blast({
    delimiter: "character",
    tag: "span",
  });

  var pageAbout = $(".about_wrapper");

  $(".blast").on("hover", function () {
    var el = $(this);

    $(this).addClass("animated rubberBand");
    $(this).one(
      "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
      function () {
        el.removeClass("animated rubberBand");
      }
    );
  });
});

CodePudding user response：

You can check the device width before making the event listener

$(document).ready(function () {
  $("h2").blast({
   delimiter: "character",
   tag: "span",
  });

  // You choose the event depending on the screen width
  let event;
  screen.width > 400 ? event = 'hover' : event = 'click'
  //
  var pageAbout = $(".about_wrapper");

  $(".blast").on(event, function () {
    var el = $(this);

    $(this).addClass("animated rubberBand");
    $(this).one(
      "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
  function () {
    el.removeClass("animated rubberBand");
  }
);

}); });

If the screen.width was not suitable, you can find some ways to detect the device type on this discussion