点击事件不适用于连接到行尾的标记

我有以下代码。它由一条带有标记的线组成。我为线条和标记写了点击事件。但是当我点击标记元素时，click事件不起作用，并且像游标类型这样的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>

来源

2016-07-06 Ashok kumar

从specification，部分11.6.2“标记”元素的最后一行。

不处理附加到 'marker'元素内容的事件属性和事件侦听器;只处理 'marker'元素的渲染方面。

它解释了一切。

来源

2016-07-06 11:05:50

-1

只是尝试不使用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>

来源

2016-07-06 11:24:36

它不工作。标记未附加到行的末尾。 –

不要尝试移动标记。在创建之前移动位置并使用div的边框宽度创建箭头 –

点击事件不适用于连接到行尾的标记

回答

相关问题