单击事件不适用于附加到行尾的标记答案

【问题标题】：Click events not working for marker attached to the line end单击事件不适用于附加到行尾的标记
【发布时间】：2020-06-11 18:43:40
【问题描述】：

我有以下代码。它由一条线组成，其末端附有一个标记。我为线条和标记写了一个点击事件。但是当我单击标记元素时，单击事件不起作用，并且光标类型等 CSS 属性也没有设置。如何为标记元素编写点击事件并应用 css 属性？

$("#line12").on("click",function() {
  alert("Hai You clicked the line")
})
$("#arrow").on("click",function() {
  alert("Hai You clicked the line")
})

#line12
{
  cursor:pointer;
}
#arrow
{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="600px" height="200px">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#000" />
    </marker>
  </defs>

  <line x1="50" y1="50" x2="250" y2="150" stroke="#000" id="line12" stroke-width="5" marker-end="url(#arrow)" />
</svg>

【问题讨论】：

标签： jquery css svg

【解决方案1】：

从specification 开始，11.6.2 节的最后一行“标记”元素。

附加到内容的事件属性和事件侦听器 'marker' 元素未被处理；只有渲染方面处理“标记”元素。

它解释了一切。

【讨论】：

是否有任何替代解决方案？

【解决方案2】：

标记元素不可点击，但您可以在路径末尾放置一个 <circle> 和 fill="transparent" 并将您的事件附加到它。如果你把这个圆的半径r设置为[stroke-width]*[markerWidth]，它肯定会覆盖标记。

查看示例：https://jsfiddle.net/91yuz4ng/

【讨论】：

感谢您的解决方案

【解决方案3】：

尽量不要使用 defs 和标记，并将我的代码中的箭头移动到行尾。

 <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>
    #line12
    {
      cursor:pointer;
    }
    #arrow
    {
    cursor:pointer;
    position: relative;
    }
    </style>

    </head>
    <body>
    <script src="jquery-3.0.0.js"></script>
    <script>
    $(function () {
        $("#line12").click(function (event){
            alert("Hai You clicked the line")
        })
        $("#arrow").click(function(event){
            alert("Hai You clicked the path")
        });
    });
    </script>
    <svg width="600px" height="200px">
        <path id="arrow" d="M100,100 L100,160 L190,130 z" fill="#000"/>
        <line x1="50" y1="50" x2="250" y2="150" stroke="#000" id="line12"        stroke-width="5" marker-end="url(#arrow)" />
    </svg>
    </body>
    </html>

【讨论】：

它不工作。标记未附加到行尾。
不要试图移动标记。只需在创建之前移动位置并使用 div 的边框宽度来创建箭头