Firing a function onclick() passing the id of the clicked element

Question

I have a table, in which every td is like this:

<td onclick="GetCellValues(this.id)" id="myrowID">My text</td>

The Javascript function I need would be like this:

function GetCellValues(clicked_element_ID) {
   if (RIGHTCLICK){
      document.getElementById(clicked_element_ID).style.backgroundColor="red";
      THEN CALL FUNCION1();
   }
   else if(LEFTCLICK OR WHEELCLICK){
      document.getElementById(clicked_element_ID).style.backgroundColor="green";
      THEN CALL FUNCION2();
   }
}

So the question is: how can I recognize if LEFT, RIGHT or WHEEL mouse button was pressed?

Thank you in advance for your help!!!

possible duplicate of [Detect left mouse button press](http://stackoverflow.com/questions/3944122/detect-left-mouse-button-press) — Dave, Oct 23 '14 at 18:10
possible duplicate of [How to distinguish between left and right mouse click with jQuery](http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery) — starvator, Oct 23 '14 at 18:10
In the future, could you try doing a quick google search before posting here? — starvator, Oct 23 '14 at 18:11
@starvator I don't use Jquery, and I really did a search on google but the answers I found were too complicated for me (beginner level) to understand. Sorry. — Giorgio, Oct 23 '14 at 18:15
@Giorgio `jQuery` is much simpler than `JavaScript`. You should take a look into it. — starvator, Oct 23 '14 at 18:22

score 0 · Answer 1 · answered Oct 23 '14 at 18:51

You can do something like this:

<script>

    function mouseHandler(event) {
        if( event.button == 2){
            this.style.backgroundColor = "red";
            rightFunc();
        } else{
            this.style.backgroundColor = "blue";   
            otherFunc();
        }
    }

    function rightFunc(){ alert("rightclick");}
    function otherFunc(){ alert("left or wheel");}

    window.onload = function(){
        document.getElementById("myrowID").addEventListener("mousedown", mouseHandler);
    }
</script>

Check it out here: JSFiddle

Thank you but I don't understand how to bind that function to the specific td I click. Since my table is dynamically created, I need to associate a single function that uses the td ID as parameter. — Giorgio, Oct 23 '14 at 21:17

score -1 · Answer 2 · answered Oct 23 '14 at 18:29

If you want to use jQuery, do this:

$('#myrowID').mousedown(function(event) {
    switch (event.which) {
        case 1:
            //left
        case 2:
            //middle
            document.getElementById(clicked_element_ID).style.backgroundColor="green";
            //THEN CALL FUNCION2();
            break;
        case 3:
            //right
            document.getElementById(clicked_element_ID).style.backgroundColor="red";
            //THEN CALL FUNCION1();
            break;
        default:
            alert('I don't know what button that was!');
    }
});

Note: you need to import jquery, so add this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

There's no need to use jQuery, and you shouldn't give a jQuery answer if question isn't tagged with jQuery. — Johan Karlsson, Oct 23 '14 at 18:52

Firing a function onclick() passing the id of the clicked element

2 Answers2