我如何在 JavaScript 中暂时禁用该事件?
How would I disable the event temporarily in plain JavaScript?
我正在用普通 JavaScript 制作我自己的滑块系统。问题是每次我在动画完成之前重做 touch-starting
时,事件和动画都会像这样覆盖:
我的期望是摆脱覆盖,并暂时禁用 touchevents
直到 CSS 动画(添加、删除 CSS 类 使用 .classList
在 JS 中)结束了。
我试图自己解决这个问题,但不知道该怎么做。
我附上我在上面的GIF中使用的尽可能简化的基本代码结构。请原谅无法上传此片段的完整代码,因为问题太长且难以阅读:
'use strict';
(function () {
function Card($el) {
this.$el = $el;
this.$el.addEventListener('touchstart', (e) => this.start(e));
this.$el.addEventListener('touchmove', (e) => this.move(e));
this.$el.addEventListener('touchend', (e) => this.end(e));
}
Card.prototype = {
start: function(e) {
this.active = false;
this.coordX = e.touches[0].clientX;
this.coordY = e.touches[0].clientY;
},
move: function(e) {
this.active = true;
var x = e.touches[0].clientX,
y = e.touches[0].clientY,
dist = Math.sqrt(x + this.coordX);
},
end: function(e) {
let distAmount = e.changedTouches[0].clientX - this.coordX;
if (distAmount > 200) {
this.create(this.direction * -1, this.swipe);
} else if (distAmount < -200) {
this.create(this.direction, this.swipe);
}
},
create: function(direction, callback) {
let bound = callback.bind(this);
console.log(`Disable the whole events (touchstart, move, end)`);
setTimeout(bound, 100, direction, this.resize);
},
swipe: function(direction, callback) {
let binding = callback.bind(this);
console.log('Disabling the events');
setTimeout(binding, 800, direction);
},
resize: function() {
console.log(`Allow the events after this function is end`);
}
}
/********************************************************************/
let news_box = document.getElementById('box1');
const newsCard = new Card(news_box);
}());
* {
margin: 0;
padding: 0;
}
#box {
width: auto;
height: 800px;
border: 4px dotted black;
}
.contents {
position: absolute;
width: 200px;
height: 200px;
float: left;
top: 0;
left: 0;
}
.purple {
background-color: purple;
}
<div id="box1">
<div class="contents purple">
box content
</div>
</div>
可以在function Card($el)
里面引入一个布尔值this.allowTriggering = true;
在 create
你应该把它设置为 false this.allowTriggering = false;
在 resize
中,您应该将其恢复为 true this.allowTriggering = true;
然后用 if 条件包装函数 start
、move
和 end
以检查 this.allowTriggering
是否为真。
完整代码:
'use strict';
(function () {
function Card($el) {
this.$el = $el;
this.$el.addEventListener('touchstart', (e) => this.start(e));
this.$el.addEventListener('touchmove', (e) => this.move(e));
this.$el.addEventListener('touchend', (e) => this.end(e));
this.allowTriggering = true;
}
Card.prototype = {
start: function (e) {
if (this.allowTriggering) {
this.active = false;
this.coordX = e.touches[0].clientX;
this.coordY = e.touches[0].clientY;
}
},
move: function (e) {
if (this.allowTriggering) {
this.active = true;
var x = e.touches[0].clientX,
y = e.touches[0].clientY,
dist = Math.sqrt(x + this.coordX);
}
},
end: function (e) {
if (this.allowTriggering) {
let distAmount = e.changedTouches[0].clientX - this.coordX;
if (distAmount > 200) {
this.create(this.direction * -1, this.swipe);
} else if (distAmount < -200) {
this.create(this.direction, this.swipe);
}
}
},
create: function (direction, callback) {
let bound = callback.bind(this);
console.log(`Disable the whole events (touchstart, move, end)`);
this.allowTriggering = false;
setTimeout(bound, 100, direction, this.resize);
},
swipe: function (direction, callback) {
let binding = callback.bind(this);
console.log('Disabling the events');
setTimeout(binding, 800, direction);
},
resize: function () {
console.log(`Allow the events after this function is end`);
this.allowTriggering = true;
}
};
/********************************************************************/
let news_box = document.getElementById('box1');
const newsCard = new Card(news_box);
}());
我正在用普通 JavaScript 制作我自己的滑块系统。问题是每次我在动画完成之前重做 touch-starting
时,事件和动画都会像这样覆盖:
我的期望是摆脱覆盖,并暂时禁用 touchevents
直到 CSS 动画(添加、删除 CSS 类 使用 .classList
在 JS 中)结束了。
我试图自己解决这个问题,但不知道该怎么做。
我附上我在上面的GIF中使用的尽可能简化的基本代码结构。请原谅无法上传此片段的完整代码,因为问题太长且难以阅读:
'use strict';
(function () {
function Card($el) {
this.$el = $el;
this.$el.addEventListener('touchstart', (e) => this.start(e));
this.$el.addEventListener('touchmove', (e) => this.move(e));
this.$el.addEventListener('touchend', (e) => this.end(e));
}
Card.prototype = {
start: function(e) {
this.active = false;
this.coordX = e.touches[0].clientX;
this.coordY = e.touches[0].clientY;
},
move: function(e) {
this.active = true;
var x = e.touches[0].clientX,
y = e.touches[0].clientY,
dist = Math.sqrt(x + this.coordX);
},
end: function(e) {
let distAmount = e.changedTouches[0].clientX - this.coordX;
if (distAmount > 200) {
this.create(this.direction * -1, this.swipe);
} else if (distAmount < -200) {
this.create(this.direction, this.swipe);
}
},
create: function(direction, callback) {
let bound = callback.bind(this);
console.log(`Disable the whole events (touchstart, move, end)`);
setTimeout(bound, 100, direction, this.resize);
},
swipe: function(direction, callback) {
let binding = callback.bind(this);
console.log('Disabling the events');
setTimeout(binding, 800, direction);
},
resize: function() {
console.log(`Allow the events after this function is end`);
}
}
/********************************************************************/
let news_box = document.getElementById('box1');
const newsCard = new Card(news_box);
}());
* {
margin: 0;
padding: 0;
}
#box {
width: auto;
height: 800px;
border: 4px dotted black;
}
.contents {
position: absolute;
width: 200px;
height: 200px;
float: left;
top: 0;
left: 0;
}
.purple {
background-color: purple;
}
<div id="box1">
<div class="contents purple">
box content
</div>
</div>
可以在function Card($el)
this.allowTriggering = true;
在 create
你应该把它设置为 false this.allowTriggering = false;
在 resize
中,您应该将其恢复为 true this.allowTriggering = true;
然后用 if 条件包装函数 start
、move
和 end
以检查 this.allowTriggering
是否为真。
完整代码:
'use strict';
(function () {
function Card($el) {
this.$el = $el;
this.$el.addEventListener('touchstart', (e) => this.start(e));
this.$el.addEventListener('touchmove', (e) => this.move(e));
this.$el.addEventListener('touchend', (e) => this.end(e));
this.allowTriggering = true;
}
Card.prototype = {
start: function (e) {
if (this.allowTriggering) {
this.active = false;
this.coordX = e.touches[0].clientX;
this.coordY = e.touches[0].clientY;
}
},
move: function (e) {
if (this.allowTriggering) {
this.active = true;
var x = e.touches[0].clientX,
y = e.touches[0].clientY,
dist = Math.sqrt(x + this.coordX);
}
},
end: function (e) {
if (this.allowTriggering) {
let distAmount = e.changedTouches[0].clientX - this.coordX;
if (distAmount > 200) {
this.create(this.direction * -1, this.swipe);
} else if (distAmount < -200) {
this.create(this.direction, this.swipe);
}
}
},
create: function (direction, callback) {
let bound = callback.bind(this);
console.log(`Disable the whole events (touchstart, move, end)`);
this.allowTriggering = false;
setTimeout(bound, 100, direction, this.resize);
},
swipe: function (direction, callback) {
let binding = callback.bind(this);
console.log('Disabling the events');
setTimeout(binding, 800, direction);
},
resize: function () {
console.log(`Allow the events after this function is end`);
this.allowTriggering = true;
}
};
/********************************************************************/
let news_box = document.getElementById('box1');
const newsCard = new Card(news_box);
}());