Question

我正在尝试在d3中使用blur事件，这在chrome和safari浏览器中运行良好，但遗憾的是，它在Firefox中无效。使用模糊的目的是在画布外部单击后重置其他项目解决问题的任何解决方法？

var width = 500;
var height = 400;
var svg = d3.select("#viz")
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("viewBox", "0 0 " + width + " " + height)
  .append('g');
var outer = svg.append('g')
  .attr('transform', "translate(" + width / 2 + "," + height / 2 + ")")
  .attr('class', 'boundry');

var boundry = outer.append("svg:circle")
  .attr("r", 100)
  .attr("class", "primary-parent")
  .attr('fill', 'red')
  .attr('stroke', "yellow")
  .attr("stroke-width", 5);

d3.selectAll('.primary-parent').on('click', function() {
  alert("click event fired");
}).on("blur", function() {
  alert("blur event fired");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="viz"></div>

Answer 1

我不喜欢这个解决方案，但是通过自己跟踪焦点对象并通过将临时点击监听器附加到窗口对象来移除焦点，可以实现与您正在寻找的类似行为。所以事件代码变成了：

var focused;
var setWindowClickListener = function(e) {
    if (e.target !== focusedElement) {
    focusedElement = null;
    window.removeEventListener('click', setWindowClickListener);
    alert('blur');
  }
};

d3.selectAll('.primary-parent')
.on('click', function() {
    alert('click');
    focusedElement = d3.event.target;
    window.addEventListener('click', setWindowClickListener);
});

请参阅fiddle。

当然，这并不理想，因为我们附加了一个任意的事件监听器，这不适用于键盘模糊 - 模糊事件的基本功能。但是，它可能适合您进行一些调整。

在d3上模糊事件仅在firefox中不起作用

1 个答案: