负边距点击不起作用

Question

我为图像设置了一个负上边距（-15像素），它工作正常。但问题是点击事件。点击仍然在下方（即距离浏览器上图像正好的视图下方+ 15px）处理图像。

<div data-role="page" >

    <!-- Header -->
    <div data-role="header" class="listHeader" data-position="fixed" data-tap-    toggle="false">

        <img src="images/all_lists_normal.png" class="view_list"> 
        <img src="images/x_normal.png" class="x_image">
        <div class="titleList">
            <p id="page_title" class="label"></p>
        </div>

        <img id="id_new_products" src="images/add_products_normal.png" class="addNewItemImage_page4"> 
        <img id="id_find_stores"  src="images/find_store_normal.png"   class="addNewItemImageMargin">
    </div> <!-- / header -->

    <!-- Content -->
    <div data-role="content" class="mainBackground">
     some content....
    </div>

</div>




.listHeader {
background: url(../images/header_nologo.png) no-repeat 50% 0px;
background-size: 100% 107%;
height: 60px;

}

.view_list {
float: left;
margin-top: 12px;
}

.x_image {
float: right;
margin-right: 15px;
margin-top: 17px;
}

.addNewItemImage_page4 {
min-width: 100%;
margin-top: 9px;
position:relative;
}

.addNewItemImageMargin {
min-width: 100%;
margin-top: -14px; /****************** PROBLEM ***********/
position:relative;
}

.mainBackground {
background: url(../images/background.jpg) no-repeat 50% 0px;
background-size: 100% 100%;
min-height: inherit;
min-width: 100%;
margin-top: -2px;
}

JS： -

  $("#id_find_stores")
    .click(function(){

        alert('hi');

    });

Answer 1

这是将动作处理程序放在img上而不是包装div的示例： http://jsfiddle.net/vhxc3/

这就是我试图提供您提供给我们的信息： http://jsfiddle.net/hhkuL/

$(document).ready(function() {
    $('#id_new_products').click(function() {
        $(this).css({ "border" : "1px solid red" });            
    }); 
});​