How to turn off hover if on click event is active in Jquery?

Question

I have an icon name tag-icon-arrow i have onclick and hover events on it.

But since i hover over the icon the hover is active and when clicked both are active which i don't want, I know before clicking it will hover here,but if i click on the icon it should turn off.

 bindViewEvents: function () {
            let me = this
                , window = this.$window
                , $tagArrow = window.find(".tag-icon-arrow");

            $tagArrow.off().on('click', function (e) {
                me.highlight(e, true, true);
            });

            $tagArrow.hover(
                function (e) {me.highlight(e, true);},
                function (e) {me.highlight(e, false);}
            );
            $tagArrow.on('click', function (e) {
                me.selectRole(e);
            });

        },
selectRole: function (e) {
            let me = this;
            let $target = $(e.currentTarget);
            let hasRole = $target.is("[data-role]");
            let tagid = hasRole ? $target.attr("data-tagid") : null;
            me.api.xyz(tagid);
        },
        highlight: function (e, canHighlight, clicked) {
            let me = this
                , $target = $(e.currentTarget)
                , _id = $target.attr('data-id')
                , tagid = $target.attr("data-tagid")
                , tbId = me.isZone ? $target.attr("data-M") : "";

            if (canHighlight) {
                clicked ? $target.addClass("active") : 
                $target.removeClass("active");
                if (tbId === undefined) tbId = "";
                let objData = [{"_id": _id, "tagid": tagid,}];
                Common.Gateway.onEventsToXYZ({
                    "event": "xyz",
                    "fids": me.isZone ? [] : objData,
                    "rids": me.isZone ? objData : []
                });
                me.api.xyz(tagid);
            } else {
                if ($target.is(".active"))
                    return;
                Common.Gateway.onEventsToXYZ({
                    "event": "xyz"
                });
                me.api.xyz(null);
                $target.removeClass("active");
            }
        },

selectRole and highLight functions are custom functions to call based on the event triggered. How can improve this so that both work properly? as they are expected to.

Answer 1

Just don't turn off highlighting when the role is selected:

const view = new function() { // I guess this is an angularjs controller
  
  const self = Object.assign(this /* $scope */, {highlight, bindViewEvents, selectRole});
  
  self.bindViewEvents();
  
  function highlight(e, val = true){
    $(e.target).toggleClass('highlighted', val);
  }

  function selectRole(e){
    $(e.target).toggleClass('selected');
  }

  function bindViewEvents() {
    
    const $tagArrow = $('.tag-icon-arrow');

    $tagArrow
      .hover(
        e => self.highlight(e), 
        e => $tagArrow.is('.selected') || self.highlight(e, false)
      )
      .on('click', e => self.selectRole(e));

  }
}

body{
  margin:50px;
}
.tag-icon-arrow{
  padding:20px 30px;
  border-radius:10px;
  background:#bbb;
  cursor:pointer;
  border: 1px solid transparent;
}
.tag-icon-arrow.highlighted{
  background:#ffddee;
}
.tag-icon-arrow.selected{
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="tag-icon-arrow">Hover & click me</a>

But better use CSS:

const view = new function() { // I guess this is an angularjs controller
  
  const self = Object.assign(this /* $scope */, {bindViewEvents, selectRole});
  
  self.bindViewEvents();
  
  function selectRole(e){
    $(e.target).toggleClass('selected');
  }

  function bindViewEvents() {
    
    const $tagArrow = $('.tag-icon-arrow');

    $tagArrow
      .on('click', e => self.selectRole(e));

  }
}

body{
  margin:50px;
}
.tag-icon-arrow{
  padding:20px 30px;
  border-radius:10px;
  background:#bbb;
  cursor:pointer;
  border: 1px solid transparent;
}
.tag-icon-arrow:hover,.tag-icon-arrow.selected{
  background:#ffddee;
}
.tag-icon-arrow.selected{
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="tag-icon-arrow">Hover & click me</a>

Answer 2

The easiest way to do this is to use a flag that says whether the icon has been clicked or not, and then use that flag to conditionally turn on/off the hover effect.

Here's the code:

    bindViewEvents: function () {
      let me = this
        , window = this.$window
        , $tagArrow = window.find(".tag-icon-arrow")
        , clicked = false;
    
      $tagArrow.off().on('click', function (e) {
        me.highlight(e, true, true);
        clicked = true;
      });
    
      $tagArrow.hover(
        function (e) {
          if (!clicked) {
            me.highlight(e, true);
          }
        },
        function (e) {
          if (!clicked) {
            me.highlight(e, false);
          }
        }
      );
    
      $tagArrow.on('click', function (e) {
        me.selectRole(e);
        clicked = true;
      });
    },