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

SDP
June 17, 2023
250 views
0 votes
2 Answers

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);
            });

        },

Here you can see hover is always active since its depends on cursor.
How can improve this so that both work properly? as they are expected to.

Answers

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;
      });
    },

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>

Please signup or login to give your own answer.

Click here to cancel reply.