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.
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>