jQuery Mouse Events Methods

jQuery Mouse Events Methods

The jQuery provides a complete mouse event solution.

methoddescription
.click()Bind an event handler to the "click" javascript event, or trigger that event on an element.
.contextMenu()Bind an event handler to the "contextmenu" javascript event, or trigger that event on an element.
.dblclick()Bind an event handler to the "dblclick" javascript event, or trigger that event on an element.
.hover()Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
.mousedown()Bind an event handler to the "mousedown" javascript event, or trigger that event on an element.
.mouseenter()Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
.mouseleave()Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.
.mousemove()Bind an event handler to the "mousemove" javascript event, or trigger that event on an element.
.mouseout()Bind an event handler to the "mouseout" javascript event, or trigger that event on an element.
.mouseover()Bind an event handler to the "mouseover" javascript event, or trigger that event on an element.
.mouseup()Bind an event handler to the "mouseup" javascript event, or trigger that event on an element.
.toggle()Bind two or more handlers to the matched elements, to be executed on alternate clicks.

Examples

// Hide all paragraphs in the page when they are clicked.
$("p").click( function () { $(this).hide(); });


// To show a "Hello World!" alert box when the contextmenu event is triggered on a paragraph on the page:
$( "p" ).contextmenu(function() {
  alert( "Hello World!" );
});


// bind a callback which will alert "Hello World!" to the doubleclick event
$("p").dblclick( function () { alert("Hello World!"); });


// add/remove a class to td element when hover in/out
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);


// When the mouse is pressed down, hide or display elements:
$("button").mousedown(function(){
  $("p").slideToggle();
});


// When the mouse pointer enters (passes through) the element, change the background color of the element:
$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});


// When the mouse pointer leave the bound element, change the background color of the element:
$("p").mouseleave(function(){
  $("p").css("background-color","yellow");
});
// When the mouse pointer leave the bound element Or it's children <-- Notice
// change the background color of the element:
$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});


// Get the position of the mouse pointer
$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

// mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.
$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});


// When the mouse button is released, hide or display elements:
$("button").mouseup(function(){
  $("p").slideToggle();
});


// show or hide selector element
$('td).toggle();
date2019-04-03 01:24:54 From:www.jquerypluginhub.com Author:JPH
Related Tags:
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *