文章/答案/技术大牛

发布

社区首页 >问答首页 >将单击事件绑定到上下文菜单列表元素

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

Stack Overflow用户

提问于 2015-04-17 16:27:08

回答 1查看 4.4K关注 0票数 2

我正在生成动态上下文菜单，当用户右击形状时会出现这些菜单。我已经成功地创建了上下文菜单，但是当用户从菜单中选择一个条目时，我在捕捉单击事件时遇到了困难。

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

我已经挖了这么一堆，并没有找到一些东西，将使我的其他道路。

我希望本例中的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/

contextmenu

d3.js

onclick

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-17 18:52:16

请看这个小提琴

我基本上更新了您的点击监听器如下：

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

好像很好用。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29704693

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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