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

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

javascript jquery html css

Javascript 检测点击div背景30%大小调整,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个div，背景大小调整了30%，一个img大小调整了100% 我只想在背景大小调整过的div（下图中为紫色）上检测onclick，而不是在所有元素上最好的方法是什么先谢谢你 <div class="div1" style="width:600px; background:url(img/litlePict.png) no-repeat scroll center center / 30% auto"> <img class="store" src="img/

我有一个

div

，背景大小调整了30%，一个

img

大小调整了100%

我只想在背景大小调整过的div（下图中为紫色）上检测

onclick

，而不是在所有元素上

最好的方法是什么

先谢谢你

<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>

更新

这就是我想做的

我认为用这么少的HTML标签是不可能做到这一点的。您应该在div1中获得另一个div，然后使用z-index和事件传播。

我没有测试这段代码，但它可能会提示您如何实现类似的功能

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

$（'.element'）。在（'click'，函数（e）上{
var xPosition=$（this）.position（）.left；//X轴上“零”与元素左侧之间的距离
var yposition=$（this）.position（）.top；//Y轴上“零”与元素顶部之间的距离
var elemWidth=$（this）.width（）；//元素的高度
var elemHeight=$（this）.height（）；//元素的宽度
var mouseX=e.pageX-xposition；//鼠标在屏幕X轴上的位置，删除单击元素左侧的距离
var mouseY=e.pageY-yposition；//鼠标在屏幕Y轴上的位置，删除到所单击元素顶部的距离
//检查鼠标相对于图元的位置是否在图元宽度和高度的前35%和后35%之间
如果（（鼠标>电宽*0.35&&鼠标<电宽-电宽*0.35）&&（鼠标>电宽*0.35&&鼠标<电宽-电宽*0.35））{
//做事
}
});

您可以通过计算，动态获取

背景大小，然后将其应用于div
。在本例中，div的内容并不重要，因此我省略了图像

//获取所有元素并使用数组forEach应用以下代码
Array.prototype.slice.call（document.queryselectoral（'.bg click'））.forEach（函数（a）{
var bgsize=parseInt（a.style.backgroundSize，10）/100；
a、 addEventListener（'click'，函数（e）{
//获取当前宽度和高度（以像素为单位的预期值）
var w=parseInt（a.style.width，10）；
var h=parseInt（a.style.height，10）；
//如果x单击位于中心之外，或y单击位于中心之外
//使用preventDefault停止单击。
如果(
e、 layerXw/2+w*（bgsize/2）
||e.分层h/2+h*（bgsize/2）
){
e、 预防默认值（）；
}否则{
//否则，执行此命令
log（“在中心单击”）；
警报（“在中心单击”）；
}
})
});
在div1中放置另一个div。将此内部div的大小和位置调整到所需的位置
它将是透明的，所以外观不会受到影响。您可以在该div上使用“onClick”。
您可以检查基础div
是否存在于您单击的位置
试试这个：

var div=document.querySelector（'div'）；
div.addEventListener（'click'，函数（e）{
//在顶层
e、 target.style.pointerEvents=“无”；
var under=document.elementFromPoint（e.clientX，e.clientY）；
如果（在===div下）
在.style.background='blue'下；
//还原指针事件
e、 target.style.pointerEvents=“visiblePainted”；
});
div{
宽度：200px；
高度：200px；
背景：红色；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
img{
宽度：600px；
高度：600px；
位置：相对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
背景：rgba（0225,0,0.3）
}
好的，在阅读您的更新后修改我的答案
<html>
    <head>      
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>

    <body>
        <div id="con" style="position:relative; width:60px; height:60px; background-color: #ff0000;">
            <div id="smallerDiv" style="position:absolute; top:20px; left:20px;  width:20px; height:20px; background-color: #ededed;">              
            </div>
            <img id="theImg" src="imgs/topImg.png" style="opacity:0; position:absolute; top:0px; left:0px; pointer-events:none;"/>
        </div>
    </body>

    <script>

        $("#con").animate({"width":"600px","height":"600px"}, 1000);
        $("#smallerDiv").animate({"width":"200px","height":"200px","top":"200px",'left':"200px"}, 1000);

        document.getElementById("smallerDiv").onclick = function(){
            $("#theImg").animate({"opacity":1}, 500);
        };

    </script>
</html>


$（“#con”）。动画（{“宽度”：“600px”，“高度”：“600px”}，1000）；
$（“#smallerDiv”）。动画（{“宽度”：“200px”，“高度”：“200px”，“顶部”：“200px”，“左侧”：“200px”}，1000）；
document.getElementById（“smallerDiv”）.onclick=function（）{
$（“#theImg”）。设置动画（{“不透明度”：1500）；
};

这将完全满足您的需要。我认为最好的方法是在.div1中添加一个div。我认为您无法做到这一点。为什么不将背景图像设置为100%，将img设置为30%？你可以更容易地点击它。否则，您可以创建一个位于图像顶部的空白div，该div与背景图像的大小匹配，并在其上有一个单击侦听器。我不清楚图像后面的背景是如何可见的。后者是透明的吗？背景图像是如何在其内部图像的前面出现的？是的，我有一个透明的img@DarrenGourley我之所以使用它，是因为在动画中，img没有遵循div，这是一个写得很糟糕的答案，而且可能不正确，不起作用。我想点击div backround images很好的答案，但是当我设置div动画时，你的函数不起作用。在您的示例中，当您右键单击方形时，不会出现警告，这有一些缺点，因为如果您使用动态定位（主要与偏移有关），则会有更多捕获。另外，请注意，由于沙箱的原因，Chrome中不会出现警报（它们在Safari中会出现，但这就是为什么console.log在其中的原因）。好的，您的第一个代码不适用于我。例如，我的div是animate width:0到width:1000，但当我测试代码时，结果是相同的。他点击所有元素。@P.Frank我很抱歉，这个具体案例的实现并不适用于人们可能想用它做的所有事情，但这不是我来这里的目的。第二个代码更好，第一个是il
<html>
    <head>      
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>

    <body>
        <div id="con" style="position:relative; width:60px; height:60px; background-color: #ff0000;">
            <div id="smallerDiv" style="position:absolute; top:20px; left:20px;  width:20px; height:20px; background-color: #ededed;">              
            </div>
            <img id="theImg" src="imgs/topImg.png" style="opacity:0; position:absolute; top:0px; left:0px; pointer-events:none;"/>
        </div>
    </body>

    <script>

        $("#con").animate({"width":"600px","height":"600px"}, 1000);
        $("#smallerDiv").animate({"width":"200px","height":"200px","top":"200px",'left':"200px"}, 1000);

        document.getElementById("smallerDiv").onclick = function(){
            $("#theImg").animate({"opacity":1}, 500);
        };

    </script>
</html>