将点击事件绑定到上下文菜单列表元素

Question

我正在生成当用户右键单击形状时出现的动态上下文菜单。我已经设法创建了上下文菜单，但是当用户从菜单中选择一个条目时我无法捕捉到点击事件。

该事件继续绑定到右键单击操作以创建上下文菜单，而不是左键单击菜单本身内的列表项。

我已经挖了很多东西，却无法挖掘出能让我走完剩下的路的东西。

我想要的是本例中的 console.log 函数在用户单击列表元素时触发，并传递所单击项目的名称。在一个完美的世界中，它不会在最初的右键单击时触发，但我会尽我所能。

<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>

<style>
.context-menu {
  position: absolute;
  display: none;
  background-color: #f2f2f2;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  min-width: 150px;
  border: 1px solid #d4d4d4;
  z-index:1200;
}

.context-menu ul {
  list-style-type: none;
  margin: 4px 0px;
  padding: 0px;
  cursor: default;
}

.context-menu ul li {
  padding: 4px 16px;
}

.context-menu ul li:hover {
  background-color: #4677f8;
  color: #fefefe;
}
</style>
<script>

var fruits = ["Apple", "Orange", "Banana", "Grape"];

var svgContainer = d3.select("body")
  .append("svg")
  .attr("width", 200)
  .attr("height", 200);

var circle = svgContainer
  .append("circle")
  .attr("cx", 30)
  .attr("cy", 30)
  .attr("r", 20)
  .on('contextmenu', function(d,i) {
  // create the div element that will hold the context menu
  d3.selectAll('.context-menu').data([1])
    .enter()
    .append('div')
    .attr('class', 'context-menu');
  // close menu
  d3.select('body').on('click.context-menu', function() {
    d3.select('.context-menu').style('display', 'none');
    });
  // this gets executed when a contextmenu event occurs
  d3.selectAll('.context-menu')
    .html('')
    .append('ul')
    .selectAll('li')
    .data(fruits).enter()
    .append('li')

    //     THIS IS WHAT I CAN NOT GET TO WORK THE WAY I WANT IT TO WORK
    .on('click' , console.log( function(d) { return d; } + " clicked!"))


    .text(function(d) { return d; });
  d3.select('.context-menu').style('display', 'none');
  // show the context menu
  d3.select('.context-menu')
    .style('left', (d3.event.pageX - 2) + 'px')
    .style('top', (d3.event.pageY - 2) + 'px')
    .style('display', 'block');
  d3.event.preventDefault();
  });


</script>
</body>
</html>

这是一个演示代码的 plunkr（我不明白为什么我不能用 jsfiddle 把它放到运行）：http://run.plnkr.co/plunks/paPKKlUFtQCGpOmjQztS/

Answer 1

请看这个fiddle

我基本上将您的点击侦听器更新为：

.on('click' , function(d) { console.log(d); return d; })

似乎工作正常。

将点击事件绑定到上下文菜单列表元素

Binding on click events to context menu list elements

contextmenu

onclick

d3.js