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

2019年7月28日 220次阅读

我正在尝试使用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>

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

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.

当然,这并不理想,因为我们附加了一个任意的事件监听器,这不适用于键盘模糊 – 模糊事件的基本功能.但是,它可能会对您有所调整.

点赞