Question

我有一个mousemove事件，我想跟踪相对于目标元素的鼠标位置，但是layerX和offsetX给出了相对于页面的鼠标位置。可能相关的事实是，如果我放入目标元素并应用getBoundingClientRect（），则返回的所有对象属性均为0。这仅在Safari中发生（我测试过），mousemove事件在Chrome和Firefox中运行良好

所有代码都在jQuery小部件的范围内

let plot = d3.select(document.createElement("svg"))
  .attr("onmousemove", "$(\"#plot\").plot_widg(\"show_value\", event)");
...

show_value: function(eve) {
  let mouse_pos_x = eve.layerX,
    mouse_pos_y = eve.layerY;
...

对于Chrome和Firefox，这可以按预期工作，但是在Safari中，它会产生相对于页面的鼠标位置。

或者，如果我尝试：

let plot = d3.select(document.createElement("svg"))
  .attr("onmousemove", "$(\"#plot\").plot_widg(\"show_value\", event, this)");
...

show_value: function(eve, plot) {
  let {x: plot_left, y: plot_top} = plot.getBoundingClientRect(),
    mouse_pos_x = eve.pageX - plot_left,
    mouse_pos_y = eve.pageY - plot_top;
...

它的行为相同，因为在Safari中plot_left和plot_top为0，但在Chrome和Firefox中是正确的。

event.layerX和element.getBoundingClientRect（）在Safari中产生不正确的值

0 个答案: