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

Question

我有一个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>

更新

这就是我想要的！

Answer 1

我认为只有这么少的HTML标签才能实现这一点。你应该在div1中获得另一个div，然后使用z-index和事件传播。

Answer 2

我没有测试这段代码，但是它可能会给你一个如何实现这样的提示的暗示！

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

Answer 3

您可以通过计算方式执行此操作，动态获取background-size，然后将其应用于div。在这种情况下，div的内容并不重要，所以我遗漏了图像。

// Get all the elements and apply the following code using an array forEach
Array.prototype.slice.call(document.querySelectorAll('.bg-click')).forEach(function(a){
  var bgsize = parseInt(a.style.backgroundSize, 10) / 100;
  a.addEventListener('click', function(e){
    // Get the current width and height (expected value in pixels)
    var w = parseInt(a.style.width, 10);
    var h = parseInt(a.style.height, 10);
    // If the x click is outside of the center, or the y click is
    // use preventDefault to stop the click.
    if(
      e.layerX < w / 2 - w * (bgsize / 2) 
      || e.layerX > w / 2 + w * (bgsize / 2)
      || e.layerY < h / 2 - h * (bgsize / 2) 
      || e.layerY > h / 2 + h * (bgsize / 2)
    ){
      e.preventDefault();
    } else {
    // Otherwise, execute this
      console.log('clicked in center');
      alert('clicked in center');
    }
  })
});

<div class="bg-click" style="background: url(http://placehold.it/200x200) 50% 50% no-repeat; width: 200px; height: 200px; background-size: 30% 30%;"></div>

由于你的背景实际上不是一个元素，你必须自己进行计算，所以为什么不尝试使用实际的元素：

Array.prototype.slice.call(document.querySelectorAll('.bg')).forEach(function(a){
  a.addEventListener('click', function(){
    console.log('clicked');
    alert('clicked');
  })
})

.bg-holder {
  width: 200px;
  height: 200px;
  position: relative;
}
.bg-holder .bg {
  position: absolute;
  left: 50%;
  top: 50%%;
  width: 30%;
  height: 30%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  background: url(http://placehold.it/200x200);
}

<div class="bg-holder">
  <div class="bg"></div>
</div>

Answer 4

在div1中放入另一个div。在您想要的位置调整此内部div的大小和位置。

它将是透明的，因此外观不会受到打扰。你可以在这个div上使用'onClick'。

Answer 5

您可以检查基础div是否存在于您点击的位置，

试试这个：

var div = document.querySelector('div');

div.addEventListener('click',function(e){
     // on top layer
     e.target.style.pointerEvents = "none";

     var under = document.elementFromPoint(e.clientX, e.clientY);
    
     if (under === div)
      under.style.background='blue';
   
      //restore pointer-events
      e.target.style.pointerEvents = "visiblePainted";

   });

div{
    width:200px;
    height:200px;
    background:red;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
img{
    width:600px;
    height:600px;
    position:relative;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:rgba(0,225,0,0.3)
}

<div>
    <img class="store" src="img/mypict.png" width="100%" />
</div>

在这种情况下，您将调整整个背景div的大小而不是像示例中的背景图像。

Answer 6

好的，请在阅读更新后修改我的答案。

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

这将完全符合您的需要。

Answer 7

document.getElementsByTagName('img')[0].onclick(
   function(e){ 
       e.stopImmediatePropogation(); 
       // do other stuff
   });