我有一个图标名称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");
            }
        },

SeltRole和Highlight函数是根据触发的事件调用的自定义函数. 如何改进这一点,使两者都能正常工作?正如他们所期望的那样.

推荐答案

只是在 Select 角色时不要关闭高亮显示:

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>

Javascript相关问答推荐

如何解决(不忽略)reaction详尽的linter规则,而不会在获取数据时导致无限的reender循环

为什么有些库公开了执行相同任务的方法,但每个方法都处于同步/同步上下文中?

如何为GrapesJS模板编辑器创建自定义撤销/重复按钮?

我在这个黑暗模式按钮上做错了什么?

未捕获错误:在注销后重定向到/login页面时找不到匹配的路由

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状?

如何禁用附加图标点击的v—自动完成事件

colored颜色 检测JS,平均图像 colored颜色 检测JS

将数组扩展到对象中

如何在DYGRAPS中更改鼠标事件和键盘输入

令牌JWT未过期

每次重新呈现时调用useState initialValue函数

将基元传递给THEN处理程序

如何用javascript更改元素的宽度和高度?

如何使本地html页面在重新加载时保持当前可隐藏部分的打开状态?

React:防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

react -原生向量-图标笔划宽度

Cherrio JS返回父div的所有图像SRC

在GraphQL解析器中修改上下文值

如何将字符串拆分成单词并跟踪每个单词的索引(在原始字符串中)?