javascript - 背景画像全体でdivをクリック可能にするにはどうすればよいですか?

Question

parent divdiv の幅に背景画像を追加しまし100%た。div をクリックするとリダイレクトされます (すべて正常に動作します)。ただし、例の左から右にクリックした場合にのみ、div をリダイレクトしたいです。div100px;と呼ばれるフィドルは次のとおりです。 divの任意の部分をクリックすると、リダイレクトされるたびに背景画像が表示されます。しかし、私の質問は、画像を左から右にクリックした場合にのみリダイレクトしたいということ100px;です. http://jsfiddle.net/a39Va/25/

$('#loginContainer').click(function(e) { 

    window.open('http://google.com');
});

ありがとう。

Answer 1

以下を試してください（http://jsfiddle.net/a39Va/31/）

 <div id="loginContainer">
      <div class="clickable"></div>
    </div>

CSS

.clickable{
    width:100px;
    height:100%;

}

JS

$('.clickable').click(function(e) { 

    window.open('http://google.com');
});

Answer 2

最も適切なことは、image map

特定のクリック可能な領域が必要な特定の領域を定義するのに役立ちます。領域の座標を定義するだけで、任意の形状の領域を定義できます。

詳しくはこちらをご覧ください

Answer 3

これを試して

$('#loginContainer').click(function(e) { 
  if(e.pageX < 100)
    window.open('http://google.com');
});

JS フィドルのデモ

Answer 4

このJSFiddleを試してください

HTML

 <div id="loginContainer">
     <div class="clickable">
     </div>
   </div>

CSS

.clickable{
    width:100px;
    height:100%;
    cursor:pointer;
}

JS

$('.clickable').click(function(e) { 

    window.open('http://google.com');
});