作者 主題: [jQuery] div與子元件的click事件  (閱讀 9828 次)

0 會員 與 1 訪客 正在閱讀本文。

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
[jQuery] div與子元件的click事件
« 於: 2011-08-31 20:04 »
很久以來就一直想要弄個這樣的功能
就是, 在 div 元件或是在這個 div 內的任何子元件上 click
這個 div 元件都能夠有反應, 但是一直都沒有成功  :'(
不過這兩天終於弄出來了..  ;D

代碼: [選擇]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<title>DIV Test</title>
<meta http-equiv="Content-Language" content="zh-tw">
<style>
  #div-0 { height: 250px; border: 1px solid #381; color: #381; }
  #div-1 { width: 600px; height: 150px; border: 1px solid #951; color: #951; }
  #div-3 { width: 200px; height: 50px; border: 1px solid #319; color: #319; }
  #div-4 { width: 60px; height: 26px; border: 1px solid #222; color: #222; }
</style>
</head>
<body>
  <table border="1" width="700px" height="350px"><tr><td width="100%" height="100%">
    <div id="div-0">div-0
      <div id="div-1">div-1
        <div id="div-3">div-3
          <div id="div-4">div-4</div>
        </div>
        <input type="text" size="40">
      </div>
      <div id="div-2">div-2</div>
    </div>
  </td></tr></table>
</body>
</html>

假設如上面這個網頁內容
我希望當我在 div-1, div-3, div-4 或是 input 元件上點一下
或者換個角度, 如果滑鼠不是點在 div-1 或其子元件上時
能夠統一處理這個事件... 下面的 js 碼很簡單, 就不多做說明了  :D

代碼: [選擇]
<script>
$(document).ready(function () {
  $("body").click(function (evt) {
    var target = evt.target;
    if(target.id == 'div-1' || $(target).parents("#div-1").length > 0) {
      $("#div-1").css('background-color', '#fff8f8');
    } else {
      $("#div-1").css('background-color', '#f8fff8');
    }
  });
});
</script>

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
Re: [jQuery] div與子元件的click事件
« 回覆 #1 於: 2011-09-01 11:45 »
把上面的 js 包成 jQuery 的外掛, 方便以後使用..


代碼: [選擇]
$.fn.HitEvent = function(ops) {
  ops = jQuery.extend({
    onHit: null,
    onMiss: null
  }, ops);
 
  return this.each(function() {
    var self = $(this);
    $("body").click(function (e) {
      var target = e.target;
      if (self.attr('id') == target.id || $(target).parents("#" + self.attr('id')).length > 0) {
        if (ops.onHit) ops.onHit(self);
      } else {
        if (ops.onMiss) ops.onMiss(self);
      }
    });
  });
};


使用方式...

代碼: [選擇]
$("#div-1").HitEvent({
  onHit: function(e) {
    e.css('background-color', '#fff8f8');
  },
  onMiss: function(e) {
    e.css('background-color', '#f8fff8');
  }
});

$("#div-3").HitEvent({
  onHit: function(e) {
    e.css('background-color', '#3ff8f8');
  }
});

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
Re: [jQuery] div與子元件的click事件
« 回覆 #2 於: 2011-09-11 19:04 »
HitEvent 在某些情形下會有一些小問題
例如上面 div-1 與 div-3 同時設定 HitEvent
當滑鼠點在 div-3 或 div-4 時, div-1 也會有反應
所以做了一點修改..

代碼: [選擇]
$.fn.HitEvent = function(ops) {
    ops = jQuery.extend({
      onHit: null,
      onMiss: null,
      noParentsHit: false
    }, ops);
   
    return this.each(function() {
      var self = $(this);
      self.addClass('hit-event-set');
      $("body").click(function (e) {
       
        if (self.hasClass('hit-event-ignore')) {
          self.removeClass('hit-event-ignore');
          return 0;
        };
       
        var target = e.target;
        if (self.attr('id') == target.id || $(target).parents("#" + self.attr('id')).length > 0) {
          if (ops.noParentsHit) {
            self.parents('.hit-event-set').each(function() {
              $(this).addClass('hit-event-ignore');
            });
          };
          if (ops.onHit) ops.onHit(self);
        } else {
          if (ops.onMiss) ops.onMiss(self);
        }
      });
    });
  };

當 noParentsHit 設為 true, 上一層便會忽略這次的事件
使用範例:

代碼: [選擇]
<style>
  #div-0 { height: 250px; border: 1px solid #381; color: #381; }
  #div-1 { width: 600px; height: 180px; border: 1px solid #951; color: #951; }
  #div-3-1, #div-3-2 { width: 200px; height: 50px; border: 1px solid #319; color: #319; }
  #div-4, #div-5 { width: 60px; height: 26px; border: 1px solid #222; color: #222; }
</style>
<script>
$(document).ready(function () {
  $("#div-3-1").HitEvent({
    noParentsHit: true,
    onHit: function(e) {
      e.css('background-color', '#3ff8f8');
    }
  });
 
  $("#div-3-2").HitEvent({
    onHit: function(e) {
      e.css('background-color', '#3fff6f');
    }
  });
 
  $("#div-1").HitEvent({
    onHit: function(e) {
      e.css('background-color', '#fff8f8');
    },
    onMiss: function(e) {
      e.css('background-color', '#f8fff8');
    }
  });
 
  $("#div-0").HitEvent({
    onHit: function(e) {
      e.css('background-color', '#eee');
    }
  });
});
</script>
<body>
  <table border="1" width="700px" height="350px"><tr><td width="100%" height="100%">
    <div id="div-0">div-0
      <div id="div-1">div-1
        <div id="div-3-1">div-3-1
          <div id="div-4">div-4</div>
        </div>
        <input type="text" style="width: 200px;">
        <div id="div-3-2">div-3-2
          <div id="div-5">div-5</div>
        </div>
      </div>
      <div id="div-2">div-2</div>
    </div>
  </td></tr></table>
</body>

目前只想到用這種方式  :D

herb123456

  • 可愛的小學生
  • *
  • 文章數: 8
    • 檢視個人資料
Re: [jQuery] div與子元件的click事件
« 回覆 #3 於: 2012-01-29 01:11 »
jquery 的 selector很強大的...

代碼: [選擇]
$("#div-1, #div-1 > *").click(function(){
$("#div-1").css('background-color', '#fff8f8');
  });

希望這是妳要得 :)