我有一个图标名称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函数是根据触发的事件调用的自定义函数. 如何改进这一点,使两者都能正常工作?正如他们所期望的那样.