Unable to trigger click events for marker connected to the end of the line

I need help with the following code. It includes a line with a marker attached to the end. I have written click events for both the line and the marker. However, the click event does not work when I click on the marker element, and the cursor properties are not being set as expected. How can I properly write click events for the marker element and apply CSS properties?

$("#line12").on("click",function() {
  alert("You clicked the line")
})
$("#arrow").on("click",function() {
  alert("You clicked the marker")
})
#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>

jquerycsssvg

Answer №1

Information taken from the official specification.

According to the specification, markers do not respond to interactivity. Actions like clicking or hovering over a marker will not trigger any events for the marker or its children.

This clarifies the concept.

Answer №2

You won't be able to click on the marker element directly, but you can work around this by adding a <circle> element with fill="transparent" at the end of your path and then attach your event to it. Make sure to set the radius r of the circle to be equal to [stroke-width]*[markerWidth] to ensure the marker is covered.

For an example, check out this link: https://jsfiddle.net/91yuz4ng/

Answer №3

It is recommended to avoid using defs and marker and relocate the arrow in the code to the end of the line.

 <!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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to align text to the far left within a text area using Bootstrap

When I accidentally place my cursor earlier in the text area, it starts writing from that point, leaving some unwanted spaces at the beginning. I prefer it to start from the extreme left, similar to how it behaves in input boxes. Below is the code snippet ...

htmlcsstwitter-bootstraptextarea

How can you open a popover in Ionic from two different triggers but have it appear in the same place?

I am facing an issue with two buttons that trigger the same popover. The problem arises when I click on the second button, a popover is displayed in the wrong place (shown by the big blue plus icon) instead of the right corner (as shown in the second image ...

jqueryangularjsuser-interfaceionic-framework

Prevent PHP script from running during an AJAX request

Here is a brief overview of how my small application functions: users are prompted to input a URL into a simple text field. Upon any changes made to the input, my script attempts to extract and showcase the first 10 images found on that particular webpage. ...

phpjqueryajaximage

Is there a way to substitute all underscores in HTML tag IDs and classes with a hyphen symbol?

I recently realized that I used underscores instead of hyphens in some of my CSS class and id names. To correct this, I want to replace all underscores with hyphens using the sublime text replace feature (ctrl + H). Is there a way to change underscores to ...

htmlcsssublimetext3

A guide on traversing through nested HTML divs using jQuery

I am facing an issue with nested HTML div elements on my website. The data is being fetched from a JSON file and stored in a variable. For example, the 'obj' variable contains an array of objects with properties such as Name, Progress, Descripti ...

javascriptjqueryhtmlcss

Having trouble with smooth scrolling for anchor links?

I need help trouble-shooting a smooth scroll effect issue with anchor links on a client's website. Whenever I add the scroll code, the anchors on the page stop working altogether. I tried creating a pen with just a navigation and the code, and it work ...

javascriptjqueryhtmlscrollanchor

Using AJAX/jQuery to populate a SelectList in an MVC view

I have a C# MVC application where I am dynamically populating a dropdown based on a selected date using AJAX/jQuery. The action called retrieves a list of items for the chosen date. The issue I'm facing is that I've previously rendered a partial ...

javascriptjqueryasp.net-mvcajaxdrop-down-menu

How can we determine if the first character of a text input is 'X' in JQuery when the input length is 6?

I am looking to validate an HTML text box using jQuery. The requirement is that the text box should only accept numbers when the length is 6, and if the length is 7, it must start with the letter X. <input type="text" class="stid" id="stn" name="stn" ...

jqueryforms

Managing large datasets efficiently using PHP and JQuery Ajax for batch processing

Currently facing an issue with batch processing data using jQuery Ajax and PHP as a timeout problem arises due to the size of the data. The request remains incomplete and the process halts midway. One approach could be to set up Ajax to run for a specific ...

phpjqueryajax

Guide to using jQuery AJAX to read a JSON file

For the purpose of accessing and reading a json file from my server, I have employed the following code: $.ajax({ type:"GET", url:path, contentType:"application/json; charset=UTF-8", dataType:"json" success:function(response) { ...

javascriptjqueryajaxjson

The data labels in the main chart of a Highcharts column with drilldown appear blurry, with the exception of the columns that have been drilled

When setting up a Column Chart with Drilldown: The main chart displayed data labels in a blurred black color. However, when clicked, the next columns that appear (the drilled down columns) are clear and easy to read (white color, no blur). I discovered a ...

javascriptjquerycsshighcharts

assigning attributes to web addresses

Is there a way to set a style property for webpages by targeting addresses that contain /index.php/projecten/ instead of specifying each complete address in the code? Currently, I am using the following code: <ul class="subnavlist" style="display: &l ...

phpjavascriptcss

multi-event countdown timer

I have developed a simple system where a builder is assigned a task and upon completion, the inventory is updated accordingly. However, I am facing an issue with assigning multiple tasks. If task B is completed before task A, the inventory is updated with ...

jqueryarrayscountdown

Switch back and forth between multiple functions

It appears that the code provided is not functioning correctly with jQuery versions higher than 1.8. Can anyone offer insight on how to achieve the same functionality with newer versions? Additionally, should we be structuring our code like element.click(f ...

javascriptjqueryfunctiontoggle

Leverage the power of jQuery datetime picker in an ASP.NET content page with a repeater control

Can anyone help me with adding a javascript tag to a content page of my asp.net application? The script is working fine with html tags, but it's not functioning properly within the content. Here is the code snippet that displays a datetime picker: &l ...

javascriptc#jquerysqlasp.net

Managing table row associated javascript (control ID) when cloning the row can be achieved by properly updating the control IDs in

At first, the table only contains one tr (label/header). Upon clicking the add button, a new tr is created which will then be cloned upon subsequent clicks of the add button. <tr> <script type="text/javascript"> //fetching the value ...

javascriptjqueryajax

Incorporate AngularJS into jQuery plugins for enhanced functionality

My current project includes multiple jQuery plugins that I am looking to integrate into AngularJS. After some investigation, I discovered a way to create a custom directive for their initialization. However, my main concern now is figuring out how to man ...

jqueryangularjs

Utilizing jQuery ajax to make a request to a node.js server

This question may seem simple, but I am struggling to figure out the problem in my code. I am trying to send data to a Node.js API using a jQuery AJAX call. Here is my Node.js API snippet: .post('/createPerson', global.bodyParserJson, function ...

jquerynode.jsajax

Can the arrangement of icons/buttons on the JW Player control bar be customized?

I am trying to customize the skin of my JWplayer like this: This is my current progress: I have been researching how to rearrange the order of icon / button on the controlbar. According to the jwplayer documentation, the buttons on the controlbar are div ...

javascriptcssjwplayer

`Unable to activate Bootstrap dropdown feature`

Having an issue with the dropdown menu on my Bootstrap navbar - when I click it, nothing happens. I've tried various solutions found online, such as moving the <script type="text/javascript" src="js/jquery-3.3.1.min"></script> file to the ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4