Question

考虑这个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sandbox</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="vis"></div>
<script>
var svg = d3.select("#vis")
    .style({position: "fixed", width: "100%", height: "100%"})
    .append("svg")
    .style({margin: "3%", border: "1px solid #aaa"})
    .attr("viewBox", "0 0 1000 600")

svg.on("click", function (d, i) {
    console.log("click")
    if (d3.event.defaultPrevented)
        return
    console.log("click fell through")
})

svg.append("rect")
    .attr("x", 0).attr("y", 0).attr("width", "50%").attr("height", "50%")
    .call(d3.behavior.drag()
        .on("dragstart", function (d) {
            console.log("dragstart")
            d3.event.sourceEvent.stopPropagation()
            // d3.event.sourceEvent.preventDefault()
        })
    )
</script>
</body>
</html>

开始拖动矩形并结束背景上的拖动。在Chrome 36中，不会抑制背景点击，也不会阻止。这不是我期望的，也不是Firefox 31的功能。有人可以解释浏览器行为的差异并为Chrome提供解决方法吗？

另外：我是否执行stopPropagation（）或者两种浏览器似乎没有任何区别。那是为什么？

dragend on background stopPropagation在Chrome 36中不起作用

0 个答案: