JQuery Detect Mouse Click Event

April 23rd, 2011 by aditia rahman / 4 Comments  

     

This short post I want to share how JQuery handle the mouse click event, that include left click, right click and middle click, also this example show how to moving an html element based on cursor position.

Jquery Mouse Click

With CSS capability, I create some html element that shows like a physical mouse, when the appropriate button clicked the color change as well. The result may something look like on the picture above.

View Demo

The HTML

These are the html element used for this example, very simple, the mouse scroll using relative position, that relative from the container, and as usual on each corner, rounded corner property used.

<div id="content">
  <div class="top" id="topleft"></div>
  <div class="top" id="topright"></div>
  <div id="topmiddle"></div>
  <div class="clear"></div>
  <div id="mbody"></div>
</div>
The JQuery

The right click menu is turned off. To make the main element following the cursor position, mousemove event applied to document selector, with the change of the top and left css property. The background change when the mousedown event triggered and back to current condition when mouseup event triggered.

$(document).ready(function() {
    var cwidth_half = $("#content").width() / 2;
    var cheight_half = $("#content").height() / 2;

    $(document).mousemove(function(e) {
        $("#content").css({
            left: (e.pageX-cwidth_half)+'px',
            top: (e.pageY-cheight_half)+'px'
        });
    });

    $(document).bind("contextmenu", function(e) {
        return false;
    });

    $(document).mousedown(function(event) {
        switch (event.which) {
            case 1:
                $("#topleft").css("background", "#333");
                break;
            case 2:
                $("#topmiddle").css("background", "#333");
                break;
            case 3:
                $("#topright").css("background", "#333");
                break;
        }
    });

    $(document).mouseup(function(event) {
        switch (event.which) {
            case 1:
                $("#topleft").css("background", "#d3d3d3");
                break;
            case 2:
                $("#topmiddle").css("background", "#999");
                break;
            case 3:
                $("#topright").css("background", "#d3d3d3");
                break;
        }
    });

});
The CSS
#content {
    position: relative;
    width: 310px;
    height: 310px;
}
.top {
    float:left;
    width:150px;
    height: 150px;
    background: #d3d3d3;
    border: 1px solid #666;
}
#topleft {
    -webkit-border-radius: 10em .5em 0 0;
    -moz-border-radius: 10em .5em 0 0;
    border-radius: 10em .5em 0 0;
    border-right-width: 0;
}
#topright {
    -webkit-border-radius: .5em 10em 0 0;
    -moz-border-radius: .5em 10em 0 0;
    border-radius: .5em 10em 0 0;
}
#topmiddle {
    width:30px;
    height: 100px;
    position: relative;
    -webkit-border-radius: 5.5em;
    -moz-border-radius: 5.5em;
    border-radius: 5.5em;
    background: #999;
    border: 1px solid #666;
    z-index: 1;
    top: 15px;
    left: 135px;
}
.clear {
    clear: both;
}
#mbody {
    border: 1px solid #666;
    border-top-width: 0;
    background: #d3d3d3;
    width: 301px;
    height: 250px;
    -webkit-border-radius: 0 0 15.5em 15.5em;
    -moz-border-radius: 0 0 15.5em 15.5em;
    border-radius: 0 0 15.5em 15.5em;
}

View Demo

        submit to reddit Delicious

4 Comments Leave a Comment Subscribe RSS

Leave a Comment