programmatically trigger click event in svg rect element

Question

How to programmatically trigger click event in svg rectangle element element? like :$("#targetElm").triger("click");

     <svg version="1.1" class="highcharts-root" style="font-family:MontserratRegular;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="441" height="319.5" viewBox="0 0 441 319.5">
            <desc>Created with Highcharts 6.0.1</desc>
            <defs>
            <clipPath id="highcharts-74tub7h-41">
                <rect x="0" y="0" width="255" height="275" fill="none"></rect></clipPath></defs>
            <rect fill="none" class="highcharts-background" x="0" y="0" width="441" height="319.5" rx="0" ry="0"></rect>
            <rect fill="none" class="highcharts-plot-background" x="156" y="10" width="275" height="255"></rect>
            <g class="highcharts-pane-group"></g>
            <g class="highcharts-grid highcharts-xaxis-grid ">
            <path fill="none" class="highcharts-grid-line" d="M 156 15.5 L 431 15.5" opacity="1"></path>
            <path fill="none" class="highcharts-grid-line" d="M 156 36.5 L 431 36.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 156 56.5 L 431 56.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 156 76.5 L 431 76.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 156 97.5 L 431 97.5" opacity="1">
                                                    </path><path fill="none" class="highcharts-grid-line" d="M 156 117.5 L 431 117.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 156 137.5 L 431 137.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 156 158.5 L 431 158.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 156 178.5 L 431 178.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 156 199.5 L 431 199.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 156 219.5 L 431 219.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 156 240.5 L 431 240.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 156 260.5 L 431 260.5" opacity="1"></path></g><g class="highcharts-grid highcharts-yaxis-grid "><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 155.5 10 L 155.5 265" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 224.5 10 L 224.5 265" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 293.5 10 L 293.5 265" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 361.5 10 L 361.5 265" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 431.5 10 L 431.5 265" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" x="156" y="10" width="275" height="255"></rect><g class="highcharts-axis highcharts-xaxis "><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 15.5 L 146 15.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 36.5 L 146 36.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 56.5 L 146 56.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 76.5 L 146 76.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 97.5 L 146 97.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 117.5 L 146 117.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 137.5 L 146 137.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 158.5 L 146 158.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 178.5 L 146 178.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 199.5 L 146 199.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 219.5 L 146 219.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 240.5 L 146 240.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="1" d="M 156 260.5 L 146 260.5" opacity="1"></path><path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" d="M 155.5 10 L 155.5 265"></path></g><g class="highcharts-axis highcharts-yaxis "><text x="293.5" text-anchor="middle" transform="translate(0,0)" class="highcharts-axis-title" style="color:#666666;fill:#666666;" y="303"><tspan>Gross Spends - $</tspan></text><path fill="none" class="highcharts-axis-line" d="M 156 265 L 431 265"></path></g>
            <g class="highcharts-series-group">
            <g class="highcharts-series highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker " transform="translate(431,265) rotate(90) scale(-1,1) scale(1 1)" clip-path="url(#highcharts-74tub7h-41)">
         <!--Target elment-->    <rect id="targetElm" x="247" y="59" width="7" height="217" fill="rgb(0,207,151)" class="highcharts-point highcharts-color-0 highcharts-drilldown-point " style="cursor:pointer;"></rect> 
   etc..................

Robert Longson · Accepted Answer · 2018-04-14 20:52:40Z

36

How about this

document.getElementById("targetElm").dispatchEvent(new Event('click'));

Here's a working example...

document.getElementById("targetElm").dispatchEvent(new Event('click'));

<svg version="1.1" class="highcharts-root" style="font-family:MontserratRegular;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="441" height="319.5" viewBox="0 0 441 319.5">
    <rect id="targetElm" onclick="alert('hi')"/>
</svg>

i.e. create a click event and dispatch it to the element. Although you don't seem to have any handler for the click event in your question.

edited Apr 14, 2018 at 20:52

answered Apr 14, 2018 at 20:33

Robert Longson

125k27 gold badges272 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mahmoud Hassan Over a year ago

event handler exist and it works fine hanled by highcharts plotOptions: {bar: { dataLabels: { enabled: false } }, series: { events: { click: function (event) { //some code } } }, },

Mahmoud Hassan Over a year ago

Sorry, Mr. Robert, it's working, but in my case not work it's not your problem, I just try to simulate mouse click event on highcharts bar actually that's my problem

Robert Longson Over a year ago

That's why when you ask your next question you should make sure it includes a minimal reproducible example

Deep 3015 Over a year ago

@MahmoudHassan you can check docs api.highcharts.com/highcharts/plotOptions.bar.events.click

robisrob Over a year ago

Worked for me. As a jquery-selected element just use $(selector)[0].dispatchEvent(new Event('click'))

|

Kamil Kulig · Accepted Answer · 2018-04-16 08:47:55Z

2

You can use Highcharts' internal function called firePointEvent for this:

var chart = Highcharts.chart('container', {

  series: [{
    type: 'column',
    data: [1],
    point: {
        events: {
        click: function() {
            console.log('Click event fired');
        }
      }
    }
  }]
});

chart.series[0].points[0].firePointEvent('click');

Live demo: http://jsfiddle.net/BlackLabel/xbkwqzc5/

answered Apr 16, 2018 at 8:47

Kamil Kulig

5,8261 gold badge10 silver badges12 bronze badges

Collectives™ on Stack Overflow

programmatically trigger click event in svg rect element

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related