如果点击事件在Jquery中处于活动状态，如何关闭悬停？-解网

问：

我有一个图标名称，我有 onclick 和悬停事件。tag-icon-arrow

但是由于我将鼠标悬停在图标上，悬停处于活动状态，单击时两者都处于活动状态，这是我不想要的，我知道在单击它会悬停在这里，但是如果我单击图标，它应该关闭。

 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 和 highLight 函数是根据触发的事件调用的自定义函数。如何改进这一点，以便两者正常工作？正如他们所期望的那样。

JavaScript jQuery 事件主干 .js

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

1赞 Alexander Nenashev 6/17/2023 #2

只是不要在选择角色时关闭突出显示：

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>

但最好使用 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>

如果点击事件在Jquery中处于活动状态，如何关闭悬停？

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

评论

评论