Javascript Raphael.js的鼠标事件由任何鼠标按钮触发
我使用raphael.js在一张“纸”中操纵图像。我已经意识到所有鼠标事件(点击、鼠标下降、鼠标点击、拖动启动…)都是由任何鼠标按钮触发的 在本例中,有一个拖动两个对象的示例,可以使用鼠标左键、右键或中键拖动它们Javascript Raphael.js的鼠标事件由任何鼠标按钮触发,javascript,Javascript,我使用raphael.js在一张“纸”中操纵图像。我已经意识到所有鼠标事件(点击、鼠标下降、鼠标点击、拖动启动…)都是由任何鼠标按钮触发的 在本例中,有一个拖动两个对象的示例,可以使用鼠标左键、右键或中键拖动它们 JSFiddle 如何根据单击的按钮筛选事件?例如,我只想用鼠标左键拖动 我在另一篇StackOverflow文章中读到,可以用e来识别鼠标按钮,它将根据按下的按钮返回1、2或3,但我找不到使用此变量过滤事件触发器的方法 我已经找到了一个关于这个问题的解决方案,但它自2012年以来一
JSFiddle
如何根据单击的按钮筛选事件?例如,我只想用鼠标左键拖动
我在另一篇StackOverflow文章中读到,可以用e来识别鼠标按钮,它将根据按下的按钮返回1、2或3,但我找不到使用此变量过滤事件触发器的方法
我已经找到了一个关于这个问题的解决方案,但它自2012年以来一直是开放的。我尝试使用部分代码用if(e.which==1)过滤鼠标按钮,然后创建了一个控制台条目。通过这种方式,控制台条目仅在我尝试使用左按钮进行拖动时出现,而不会在其他按钮中出现。我还没有找到实现其余代码的方法
有人知道什么是g.doc.documentElement或g.doc.body(从bug报告代码中)吗
提前感谢您的支持
祝您玩得愉快我找到了一种方法,我没有使用npm安装raphael来安装raphael,而是从github下载了js文件,然后用以下方式编辑了拖动功能:
elproto.drag = function (onmove, onstart, onend, move_scope, start_scope, end_scope) {
function start(e) {
if (e.which == 1) {
(e.originalEvent || e).preventDefault();
var x = e.clientX,
y = e.clientY,
scrollY = g.doc.documentElement.scrollTop || g.doc.body.scrollTop,
scrollX = g.doc.documentElement.scrollLeft || g.doc.body.scrollLeft;
this._drag.id = e.identifier;
if (supportsTouch && e.touches) {
var i = e.touches.length, touch;
while (i--) {
touch = e.touches[i];
this._drag.id = touch.identifier;
if (touch.identifier == this._drag.id) {
x = touch.clientX;
y = touch.clientY;
break;
}
}
}
this._drag.x = x + scrollX;
this._drag.y = y + scrollY;
!drag.length && R.mousemove(dragMove).mouseup(dragUp);
drag.push({el: this, move_scope: move_scope, start_scope: start_scope, end_scope: end_scope});
onstart && eve.on("raphael.drag.start." + this.id, onstart);
onmove && eve.on("raphael.drag.move." + this.id, onmove);
onend && eve.on("raphael.drag.end." + this.id, onend);
eve("raphael.drag.start." + this.id, start_scope || move_scope || this, this._drag.x, this._drag.y, e);
}
}
this._drag = {};
draggable.push({el: this, start: start});
this.mousedown(start);
return this;
};
这很好,我必须对每个鼠标事件执行相同的操作,但我认为这些信息对其他人会有帮助。我找到了一种方法来执行此操作,而不是使用npm安装raphael安装raphael,我从github下载了js文件,然后用以下方式编辑了拖动功能:
elproto.drag = function (onmove, onstart, onend, move_scope, start_scope, end_scope) {
function start(e) {
if (e.which == 1) {
(e.originalEvent || e).preventDefault();
var x = e.clientX,
y = e.clientY,
scrollY = g.doc.documentElement.scrollTop || g.doc.body.scrollTop,
scrollX = g.doc.documentElement.scrollLeft || g.doc.body.scrollLeft;
this._drag.id = e.identifier;
if (supportsTouch && e.touches) {
var i = e.touches.length, touch;
while (i--) {
touch = e.touches[i];
this._drag.id = touch.identifier;
if (touch.identifier == this._drag.id) {
x = touch.clientX;
y = touch.clientY;
break;
}
}
}
this._drag.x = x + scrollX;
this._drag.y = y + scrollY;
!drag.length && R.mousemove(dragMove).mouseup(dragUp);
drag.push({el: this, move_scope: move_scope, start_scope: start_scope, end_scope: end_scope});
onstart && eve.on("raphael.drag.start." + this.id, onstart);
onmove && eve.on("raphael.drag.move." + this.id, onmove);
onend && eve.on("raphael.drag.end." + this.id, onend);
eve("raphael.drag.start." + this.id, start_scope || move_scope || this, this._drag.x, this._drag.y, e);
}
}
this._drag = {};
draggable.push({el: this, start: start});
this.mousedown(start);
return this;
};
这很好,我必须为每个鼠标事件做同样的事情,但我认为这些信息对其他人会有帮助