2014-10-03 107 views
0

我有两个div在另一个内。 Child div溢出。确定当子div发生溢出时点击是否在div的边界内

<div id="dv1"> 
    <p> hello world</p> 
    <div class="child1">Inner Div</div> 
</div> 

http://jsfiddle.net/Sq7hg/629/

是否有可能找出是否我父div的绿色边框内单击,包括孩子的div是边框内的部分?

+0

...但不包括未被孩子覆盖的父元素部分? – isherwood 2014-10-03 01:04:27

+0

@isherwood否,所有Parent Div(黄色区域)包括绿色边框内由儿童覆盖的部分(红色)。排除绿色边框外部的孩子部分。 – aVC 2014-10-03 01:20:26

+0

在这种情况下,我不清楚为什么你可以在父div上做点击事件。 – isherwood 2014-10-03 13:14:35

回答

0

为了便于阅读,我拿出了一些代码。

在任何情况下,如果“测试”失败,您可以返回或使其采取不同的行为。

这里是它在行动:http://jsbin.com/qerud/10/edit

$(function() { 


    function validateClick (elem,e){ 
     /*Gets clicked position inside the element */ 
     var posX = e.pageX - elem.position().left, 
      posY = e.pageY - elem.position().top; 

     /* Compares click to the size of the element */ 
     var elemWidth = elem.width(); 
     elemHeight = elem.height(); 

     if(elemWidth > posX && elemHeight > posY){ 
      return true; 
     } 
      return false; 

    }; 


    $("#dv1").mousedown(function(e) { 
     $(this).css('background-color','yellow'); 
     if(!validateClick($(this),e)){ 
      return $(this).css('background-color','blue'); 
     } 

    }); 

});

+0

我实际上正在反思,我不确定是否需要边界逻辑......如果你觉得这个有用,我会回头看看它。 – 2014-10-03 01:31:10

+0

很酷。谢谢,你是对的。边界逻辑并不重要。有用! :) – aVC 2014-10-03 02:02:56

+0

酷我编辑的答案不包括它。祝你好运! – 2014-10-03 02:29:03