Question

我有一个SVG作为徽标的按钮：

<div id="measure-representation">
  <button type="button" class="btn" data-state="audio">Audio
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg" height="80px" data-state="audio">
      <circle cx="50" cy="50" r="20" stroke="black" stroke-width="1" fill="#80ff00" opacity="1"></circle>
    </svg>
  </button>
</div>

按钮有data-state="audio"，因为我正在排除故障，SVG也会这样做（不确定SVG是否支持数据状态）。我试图允许用户单击按钮，然后从中获取data-state，并使用该信息执行其他操作。问题是如果我直接点击按钮内的SVG，它认为我点击了SVG，而不是按钮。（我已经通过强制SVG的高度和宽度以及点击按钮的周围部分来验证这一点。当我点击按钮时我得到data-state，但是当我点击SVG时我什么也得不到。

我认为这可能是我正在使用的选择器代码（在主干中），但我认为它可能通过如何构造按钮和SVG的HTMl来解决，不确定哪种方式是更好的约定，或者可能。

骨干视图和点击处理程序：

el : $("#measure-representation"), // Specifies the DOM element which this view handles

events : {
  "click .btn" : "cycle",  //Trying to differentiate and/or 
  "click .svg" : "cycle"   //capture the btn click or the SVG click
},
....
cycle: function(button) {
  //This works if I click the button
  var buttonNewState = $(button.target).data('state');
  //Tried different ways to select the SVG from the JQuery event 
  var svgNewState = ....
},

button函数中的参数cycle是一个JQuery事件对象，因此$(button.target)[0]返回我点击的HTML。它返回按钮的HTML（包括SVG和路径），或者是SVG（包括路径），或者是我点击的路径。我是否必须将data-state放在按钮中的每个元素上？或者我应该使用什么更好的选择器来冒泡以获得按钮的data-state？

SVG不仅仅是一个圆圈，所以字体很棒，不能替代。

Answer 1

如果您只想要按钮的数据属性，请将事件绑定到按钮并使用e.currentTarget：

events : {
  "click .btn" : "cycle",  //Trying to differentiate and/or   
},
....
cycle: function(e) {
  //This works if I click the button
  var buttonNewState = $(e.currentTarget).data('state');

},

这允许事件冒泡到您绑定到的元素，可以通过e.currentTarget访问该元素。 e.target仍然会引用所点击的确切元素。

Answer 2

试试这种方式

events : {
  "click .btn" : "cycle",  //Trying to differentiate and/or 
  "click .svg" : "cycle"   //capture the btn click or the SVG click
},
....
cycle: function(e) {
  //This works if I click the button
  var audio;
  if($(e.target).is('button'))
    audio = $(e.targe).data('state');
  else
    audio = $(e.targe).closest('button').data('state');     
},

单击带有SVG的Button的处理程序

2 个答案: