jquery - jQueryまたは任意：divの一部のみをクリック可能にすることは可能ですか？

Question

クリックマップ/イメージマップのように、divの一部のみをクリック可能にすることは可能ですか？jQueryで可能ですか？ヒント：htmlを編集したくありません（200個の個別のhtmlファイルを含む誤用されたテンプレート）。

Answer 1

divがクリックされると、イベントハンドラーがイベントを受信するため、クリックの位置をテストできます。

必要に応じて、、、およびを使用して、クリックした要素の位置とサイズを使用することをお勧めし$(this).offset()ます。例えば ​​：$(this).width()$(this).height()

$('mydivselector').click(function(e) {
     if (e.pageY > $(this).offset().top + 0.5*$(this).height()) {
          // bottom was clicked

     } else {
          // up of the div was clicked

     }
});

デフォルトのアクションとイベントの伝播を防ぎたい場合は、イベントハンドラーからfalseを返します。

Answer 2

すべての要素のjQueryセレクターを作成し、一部をスライスすることができます

var selector = "#mydiv";
var numberOfElements = $(selector).find('*').length/2; //It's just an example

$(selector).find('*').slice(0, numberOfElements).click(function()  {
 [....]//do stuff
});

Answer 3

おそらくdiv全体をクリック可能にする必要がありますが、クリックされた座標を確認することで、イベントを処理するかどうかを判断します。

Answer 4

イベントオブジェクトoffsetXのプロパティとoffsetYプロパティの値を確認し、気に入らない場合は何もしないことを決定できます。

例。

または、クリックイベントをまったく発生させないようにする必要がある場合は、追加の透明なを動的に作成<div>し、既存の要素の前に部分的に配置して、クリックに応答したくない部分を覆い隠すことができます。