Mousemove中的Mousemove会停止鼠标释放
Mousemove中的Mousemove会停止鼠标释放
提问于 2019-07-15 02:24:49
我在按住鼠标的同时捕获SVG组(<g>)中的鼠标位置。
但是，松开鼠标按钮后，mousemove将继续触发，并且忽略任何附加mouseup事件的尝试。
var ternary = d3.select("#ternary");
var pointer;
var selector = ternary.append("g");
selector.on("mousedown", function() {
console.log('down');
selector.on("mousemove", function() {
console.log('move');
var mouse = d3.mouse(this);
console.log(mouse[0])
console.log(mouse[1]);
// continues firing after mouse button released
// how do I clear?
});
selector.on("mouseup", function() {
alert('release');
//this event doesnt fire
});
});回答 1
Stack Overflow用户
发布于 2019-07-15 08:53:31
两个考虑因素：
- 作为容器的
<g>元素将采用其内容的大小，这是鼠标事件的责任； -
mouseup确实会触发，您可以在此处看到(仅更改<g>的are
var selector = d3.select("svg");
selector.on("mousedown", function() {
console.log('down');
selector.on("mousemove", function() {
console.log('move');
var mouse = d3.mouse(this);
console.log(mouse[0])
console.log(mouse[1]);
// continues firing after mouse button released
// how do I clear?
});
selector.on("mouseup", function() {
alert('release');
//this event doesnt fire
});
});svg {
background-color: tan;
}<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
因此，这里只有一个可回答的问题：“松开鼠标按钮后，鼠标移动继续触发，我如何清除它？”
只需将null传递给事件处理程序：
selector.on("mousemove", null);演示如下：
var selector = d3.select("svg");
selector.on("mousedown", function() {
console.log('down');
selector.on("mousemove", function() {
console.log('move');
var mouse = d3.mouse(this);
console.log(mouse[0])
console.log(mouse[1]);
// continues firing after mouse button released
// how do I clear?
});
selector.on("mouseup", function() {
selector.on("mousemove", null);
alert('release');
//this event doesnt fire
});
});svg {
background-color: tan;
}<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57030049
复制相关文章
相似问题