jQuery - Mouse Event

Bài viết này sẽ giới thiệu một số ví dụ đơn giản về các sự kiện chuột(mouse event) trong jQuery:

1. click
Tình huống: Click vào button hiển thị alert.

Code

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#butClick").click(function(){
    alert("Click");
  });
});
</script>
<input type="button" value="Click me" id="butClick"/>





2. mousedown và mouseup
Tình huống: Nhấn trái chuột vào ô vuông xám bên trái thì ô vuông trắng bên phải sẽ hiển thị dòng chữ tương ứng với sự kiện(mouse down hoặc mouse up).

Code

<div>
  <style>
  #rect_left_1{
    background-color:gray;
    border:1px solid black;
    float:left;
    width:200px;
    height:200px;
  }
  #rect_right_1{
    border:1px solid black;
    float:left;
    margin-left:50px;
    width:200px;
    height:200px;
    color:red;
    overflow:auto;
  }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#rect_left_1").mousedown(function(){
      $("#rect_right_1").html($("#rect_right_1").html()+" mousedown");
    });
    $("#rect_left_1").mouseup(function(){
      $("#rect_right_1").html($("#rect_right_1").html()+" mouseup");
    });
  });
  </script>
  <div>
    <div id="rect_left_1"></div>
    <div id="rect_right_1"></div>
    <div style="clear:both;"></div>
  </div>
</div>



Click me


3. mouseenter, mouseleave và mousemove
Tình huống: Di chuyển chuột vào ô vuông xám bên trái thì ô vuông trắng bên phải sẽ hiển thị số lần sự kiện xảy ra (mouse enter và mouse leave), riêng sự kiện mouse move thì sẽ hiển thị tọa độ của con trỏ chuột trong ô xám.

Code

<div>
  <style>
  #rect_left_2{
    background-color:gray;
    border:1px solid black;
    float:left;
    width:200px;
    height:200px;
  }
  #rect_right_2{
    border:1px solid black;
    float:left;
    margin-left:50px;
    width:200px;
    height:200px;
  }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#rect_left_2").mouseenter(function(){
      var enter = $("#enter").html();
      enter++;
      $("#enter").html(enter);
    });
    $("#rect_left_2").mouseleave(function(){
      var leave = $("#leave").html();
      leave++;
      $("#leave").html(leave);
    });
    $("#rect_left_2").mousemove(function(e){
      $("#move_x").html(e.pageX);
      $("#move_y").html(e.pageY);
    });
  });
  </script>
  <div>
    <div id="rect_left_2"></div>
    <div id="rect_right_2">
      <span>mouse enter: <span id="enter">0</span></span>
      <span>mouse leave: <span id="leave">0</span></span>
      <span>mouse move(x,y): 
      (<span id="move_x">0</span>,<span id="move_y">0</span>)
      </span>
    </div>
    <div style="clear:both;"></div>
  </div>
</div>



mouse enter: 0
mouse leave: 0
mouse move(x,y): (0,0)

4. Một số thuộc tính thường sử dụng của ObjectEventHandle trong mouse event
• pageX, pageY: Tọa độ trên trang web.
• clientX, clientY: Tọa độ trên browser.
• screenX, screenY: Tọa độ trên màn hình máy tính.



Tình huống: Di chuyển chuột trong ô vuông xám bên trái thì ô vuông trắng bên phải sẽ hiển thị các thông số pageX, pageY, screenX,...

Code

<div>
  <style>
  #event_obj_left{
    background-color:gray;
    border:1px solid black;
    float:left;
    width:200px;
    height:200px;
  }
  #event_obj_right{
    border:1px solid black;
    float:left;
    margin-left:50px;
    width:200px;
    height:200px;
  }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#event_obj_left").mousemove(function(e){
      $("#page_x").html(e.pageX);
      $("#page_y").html(e.pageY);
      $("#client_x").html(e.clientX);
      $("#client_y").html(e.clientY);
      $("#screen_x").html(e.screenX);
      $("#screen_y").html(e.screenY);
    });
  });
  </script>
  <div>
    <div id="event_obj_left"></div>
    <div id="event_obj_right">
      <span>pageX: <span id="page_x">0</span>, 
      pageY: <span id="page_y">0</span></span>
      <span>clientX: <span id="client_x">0</span>, 
      clientY: <span id="client_y">0</span></span>
      <span>screenX: <span id="screen_x">0</span>, 
      screenY: <span id="screen_y">0</span></span>
    </div>
    <div style="clear:both;"></div>
  </div>
</div>




pageX: 0, pageY: 0
clientX: 0, clientY: 0
screenX: 0, screenY: 0