[英]JQuery + AngularJS: mousedown event is being called multiple times
我有一个 angular 的单页应用程序。
我不能使用 jQuery 可拖动方法,所以我自己写了一个 -
// here I am setting the drag event to a div
var enableDrag = function(id){
$('#'+id).on('mousedown',handleMousedown);
}
var handleMousedown =function (e){
window.my_dragging = {};
my_dragging.pageX0 = e.pageX;
my_dragging.pageY0 = e.pageY;
my_dragging.elem = this;
my_dragging.offset0 = $(this).offset();
var isDragAction=false;
function handle_dragging(e){
isDragAction=true;
var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
$(my_dragging.elem)
.offset({top: top, left: left});
}
function handle_mouseup(e){
$('body')
.off('mousemove', handle_dragging)
.off('mouseup', handle_mouseup);
if(isDragAction){
console.log("drag was done!!");
}
else{
console.log("click was done!!");
}
}
$('body')
.on('mouseup', handle_mouseup)
.on('mousemove', handle_dragging);
}
在我的方法中,我这样称呼它:
//set off the last mousedwon to the div
$("someDiv").off('mousedown',handleMousedown);
//set the mousedwon to the div
enableDrag("someDiv");
由于我的 angular 应用程序的工作方式,我需要在每次调用该方法时调用它,而不是只调用一次。
拖动工作正常。
问题是每次调用该方法时 - 除了先前的事件之外,还会添加一个新事件。
意义:
正在调用第一个方法 - 拖动将打印到控制台:
“拖动完成!!”
第二种方法被调用,在一个单一的拖动:
“拖动完成!!”
“拖动完成!!”
在一次拖动中调用及时方法:
“拖动完成!!”
“拖动完成!!”
.
.
.
“拖动完成!!”
什么是累积事件或导致多次打印?
尝试通过在设置之前将其删除来确保事件只设置一次,而不是单独设置。 不确定这是问题所在,因为我尚未在您的示例中对其进行测试。
var enableDrag = function(id) {
$('#'+id).off('mousedown').on('mousedown', handleMousedown);
}
我真的认为这种操作应该在工厂或服务中进行,因为两者都是每次应用程序执行时初始化一次的单例,而控制器可以初始化多次。 另一个解决方案是放入控制器
$scope.$on('$destroy', function(){
//unbind event
$('#someDiv').unbind('mousedown', handleMousedown);
});
当您的控制器被销毁时,您需要取消绑定点击事件
角 1.4
scope.$on(
"$destroy",
function handleDestroy() {
$('#someDiv').unbind('mousedown', handleMousedown);
}
);
角 1.5
this.$onDestroy = function () {
$('#someDiv').unbind('mousedown', handleMousedown);
};
角 2
ngOnDestroy() {
$('#someDiv').unbind('mousedown', handleMousedown);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.