检测点击div背景30%调整大小

Question

我有一个div背景30%调整大小和img100%的大小

我想onclick只检测背景调整大小的div(下图中的紫色),而不是所有元素

什么是最好的方法？

先感谢您.

<div class="div1" style="width:600px; background:url(img/litlePict.png) no-repeat scroll center center / 30% auto">
    <img class="store" src="img/mypict.png" width="100%" />
</div>

UPDATE

这就是我想做的!

Answer 1

我没有测试这段代码，但它可能会提示您如何实现这样的目标！

$('.element').on('click', function (e) {
    var xPossition = $(this).position().left; // The distance between 'zero' and the left of the element on the X Axis
    var yPossition = $(this).position().top;  // The distance between 'zero' and the top of the element on the Y Axis
    var elemWidth  = $(this).width(); // The height of the element
    var elemHeight = $(this).height(); // The widthof the element

    var mouseX = e.pageX - xPossition; // The possition of the mouse on the X Axis of the screen removing the distance to the LEFT of the element clicked
    var mouseY = e.pageY - yPossition; // The possition of the mouse on the Y Axis of the screen removing the distance to the TOP of the element clicked

    // Check if the position of the mouse relative to the element is between the first 35% and the last 35% of the width and height of the element
    if ( (mouseX > elemWidth*0.35 && mouseX < elemWidth - elemWidth*0.35) && (mouseY > elemHeight*0.35 && mouseY < elemHeight - elemHeight*0.35) ) {
        // Do stuff
    }
});