I'm making a function that combined 2 events in single on
method for controlling, editing more better and easily like this:
class EventManager {
constructor($el) {
this.$el = $el;
this.mainSwitch = false;
this.subSwitch = false;
this.condition = (!this.mainSwitch && !this.subSwitch); // false false then
this.condition2 = (!this.mainSwitch && this.subSwitch); // false true then
}
start(e) {
if (this.condition) {
console.log(e.type);
this.mainSwitch = true;
return false; // return keyword for end the function
} else if (this.condition2) {
this.mainSwitch = false;
this.subSwitch = false; // Go back to the default statement.
return false;
}
return false;
}
move(e) {
if (this.mainSwitch == true && this.subSwitch == false) {
console.log(e.type);
}
}
end(e) {
if (this.mainSwitch == true && this.subSwitch == false) {
console.log(e.type);
this.mainSwitch = false;
this.subSwitch = true;
}
}
apply() {
this.$el.on('touchstart mousedown', (e) => {
this.start(e);
})
$('html').on({
['touchmove mousemove']: (e) => this.move(e),
['touchend mouseup']: (e) => this.end(e)
})
}
}
var thatEvent = new EventManager($('#link'));
thatEvent.apply();
a {
width: 100%;
height: 100px;
border-radius: 10px;
background-color: brown;
font-family: Helvetica;
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
}
<a id="link" target="_blank" href="https://google.co.uk" draggable="false">
Click/Touch and Drag/Swipe
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I've added boolean flags for skipping a specific events group
which is mouseevents
because this code runs twice when I touch
the element.
The issue is, boolean flags doesn't skip the mousedown
event as I expected. After this.condition2
managed, it rolls back for comparing this.condition
. And then fires console.log(e.type)
.
At first, I thought boolean flags could skip the event
. Because I added return
keyword every if
sections for cutting off the function after the comparing had done.
This issue causes that mousedown
event is going to disable permanently. For using the mousedown
event, both flags, this.mainSwitch
and this.subSwitch
should be set as falses
but after I managed the touchstart
, the boolean values set as false
and true
so the mousedown
event can't use anymore.
Are there any ways to actual skip the event using boolean flags in javascript?
value of this.condition
also this.condition2
is not being change in your events.
you only change the mainswitch
and subswitch
variable. it doesnt mean that you change those two will aso change the this.condition
variable. because value of this is being set from initialization/contructor
only
better change your this.condition
object into a function to make it more dynamic. so it will always rely on your mainswitch and subswitch