Question

我无法触发路径AND OR组中的点击事件。我只是假设我应该关注它的组。我尝试用相同的结果触发组。

这是svg区域的基本结构。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g id="region1">
<path id="path1" d="..."></path>
<path id="path2" d="..."></path>
<path id="path3" d="..."></path>
<path id="path4" d="..."></path>
<g>
<g id="region2">
<path id="path5" d="..."></path>
<path id="path6" d="..."></path>
<path id="path7" d="..."></path>
<path id="path8" d="..."></path>
<g>
</svg>

此下拉列表应触发区域上的点击事件

<select name="region-select" class="form-control" id="region-selection">
<option value="null">Select a region</option>
<option value="region1">Region 1</option>
<option value="region2">Region 2</option>
</select>
<a href="#" id="submit" title="Go">Go</a></div>

到目前为止，点击事件是记录每个组/区域内的正确路径。

$("#submit").bind("click",function(e){
  e.preventDefault();
  var optionVal = $('#region-selection').val(),
      paths = Snap.select('g#'+regionSelected).children("path");

  console.log(paths);//returns the correct paths!EDIT::Returns the correct paths '.node.childNodes'...coppied from chrome.
  //console.log(paths.node); //Returns the DOM NODE

  // Now click the path 
  paths.trigger("click");//returns Uncaught TypeError: selected.trigger is not a function
});

这个click事件不需要做太多事情，除了在JS中调用一个单独的函数处理其他地方。只要点击被触发没有错误，我就会满意。

SnapSVG触发路径单击

0 个答案: