javascript - 如何使 div 可点击整个背景图像？

Question

parent div我在div 宽度中添加了背景图像，100%当您单击 div 时我会进行重定向（一切正常）但我只想在您从左到右单击时重定向 div100px;例如这是我称为 div 的小提琴每当我单击 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

尝试这个

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

Js 小提琴演示

Answer 3

最合适的做法是使用image map

它可以帮助您定义需要特定可点击区域的特定区域。您可以通过定义区域的坐标来定义任何形状的区域。

请查看这里了解更多详情

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');
});