我将如何使用布尔标志跳过特定事件?
How would I skip a specific event using boolean flag?
我正在制作一个功能,将 2 个事件组合在一个 on
方法中,以便更好、更轻松地控制、编辑,就像这样:
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>
我添加了用于跳过特定 events group
的布尔标志,即 mouseevents
因为当我 touch
元素时此代码运行两次。
问题是,布尔标志没有像我预期的那样跳过 mousedown
事件。 this.condition2
管理后回滚比较this.condition
。然后触发 console.log(e.type)
.
起初,我认为布尔标志可以跳过 event
。因为我在每个 if
部分添加了 return
关键字,以便在比较完成后切断功能。
此问题导致 mousedown
事件将永久禁用。要使用 mousedown
事件,this.mainSwitch
和 this.subSwitch
两个标志都应设置为 falses
但在我管理 touchstart
之后,布尔值设置为 false
和 true
所以 mousedown
事件不能再使用了。
是否有任何方法可以使用 javascript 中的布尔标志实际跳过事件?
this.condition
的值也 this.condition2
在您的活动中没有改变。
您只需更改 mainswitch
和 subswitch
变量。这并不意味着您更改这两个也会更改 this.condition
变量。因为它的值是从 initialization/contructor
仅
设置的
最好将您的 this.condition
对象更改为函数以使其更具动态性。所以它总是依赖于你的主开关和子开关
我正在制作一个功能,将 2 个事件组合在一个 on
方法中,以便更好、更轻松地控制、编辑,就像这样:
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>
我添加了用于跳过特定 events group
的布尔标志,即 mouseevents
因为当我 touch
元素时此代码运行两次。
问题是,布尔标志没有像我预期的那样跳过 mousedown
事件。 this.condition2
管理后回滚比较this.condition
。然后触发 console.log(e.type)
.
起初,我认为布尔标志可以跳过 event
。因为我在每个 if
部分添加了 return
关键字,以便在比较完成后切断功能。
此问题导致 mousedown
事件将永久禁用。要使用 mousedown
事件,this.mainSwitch
和 this.subSwitch
两个标志都应设置为 falses
但在我管理 touchstart
之后,布尔值设置为 false
和 true
所以 mousedown
事件不能再使用了。
是否有任何方法可以使用 javascript 中的布尔标志实际跳过事件?
this.condition
的值也 this.condition2
在您的活动中没有改变。
您只需更改 mainswitch
和 subswitch
变量。这并不意味着您更改这两个也会更改 this.condition
变量。因为它的值是从 initialization/contructor
仅
最好将您的 this.condition
对象更改为函数以使其更具动态性。所以它总是依赖于你的主开关和子开关