Js mouse click events

Question

Is there an event function that activates if a mouse is clicked that goes like this:

var mouseclick = function(e) {
  if(e.mouseclick==true){
     alert("Hi");
   }
}

I'm trying to make it if i click a certain area of a canvas.

Answer 1

You can listen to the 'click' event:

var el = document.getElementById('my-div');
el.addEventListener('click', handleClick, true);

function handleClick() {
  alert('Hi');
}

See working snippet below:

var el = document.getElementById('my-div');
el.addEventListener('click', handleClick, true);

function handleClick() {
  alert('Hi');
}

#my-div {
  background-color: red;
  height: 30px;
  width: 100px
}

<div id="my-div">
  Click Me!
</div>

Here is the MDN Documentation for EventTarget.addEventListener

Answer 2

If you just want something to happen based on clicking on the canvas, check out this link: How do I add a simple onClick event handler to a canvas element?

Else if you want something to happen based on clicking a specific area of canvas, check out this link: http://pterkildsen.com/2013/06/28/create-a-html5-canvas-element-with-clickable-elements/

A quick google search yielded the above results.

Answer 3

Are you simply trying to do something like this:

document.getElementById("myBtn").addEventListener("click", myFunction);

You can change the dom selector to anything you're after.

Answer 4

Another easy solution that gives some degree of finesse is to use jQuery:

$(document).ready(function(){

   $(ELEMENT).click(function(){
      //do stuff
   });

 });

Here you can explicitly specify which element you want to "listen to".