when you click on an item, get the coordinates of the click

Question

Good time!

There is a code:

function showareabtn(el) { el.stopPropagation(); console.log(el); var x = el.originalEvent.layerX; var y = el.originalEvent.layerY; alert(x + " x " + y); }

 .areacol { width: 500px; height: 300px; overflow: hidden; background: #F00; }

 <div class="areacol" onclick="javascript:showareabtn(this);"></div>

The script should display the coordinates of the click, but it gives an error, please tell me what is wrong?

Accepted Answer · 2017-03-13T10:11:20

It is necessary to use not an element, but an event

 function showareabtn(el, event) { event.stopPropagation(); //console.log(el); var x = event.layerX; var y = event.layerY; alert(x + " x " + y); }

 .areacol { width: 500px; height: 300px; overflow: hidden; background: #F00; }

 <div class="areacol" onclick="javascript:showareabtn(this, event);"></div>

Error in the code) event is not passed as a parameter. - alexoander

Crantisz Crantisz 8.599 2 eight 38 · Answer 2 · 2017-03-13T10:16:19

Thanks, but due to the specifics I need to run the script through onclick and a function, how can this be adapted for such an event?

Like this:

 function showareabtn(el) { el.stopPropagation(); var x = el.layerX; var y = el.layerY; alert(x + " x " + y); }

 .areacol { width: 500px; height: 300px; overflow: hidden; background: #F00; }

 <div class="areacol" onclick="(function(e){ showareabtn(e); })(event)"></div>

Answer 3 · 2017-03-13T10:02:52

In your function, you work with the element that you clicked, but with the event object:

 function showareabtn(e) { var e = $.Event(e); e.stopPropagation(); console.log(e); var x = e.originalEvent.layerX; var y = e.originalEvent.layerY; alert(x + " x " + y); }

 .areacol { width: 500px; height: 300px; overflow: hidden; background: #F00; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="areacol" onclick="showareabtn(event);"></div>

Thanks, but due to the specifics I need to run the script through onclick and a function, how can this be adapted for such an event?

when you click on an item, get the coordinates of the click

3 answers 3

More articles: