マウスのダウンイベントが水平または垂直ボーダー側で発生したかどうかを示す方法は？

Question

私は、iframe要素をラップボーダー作成：私はStartResizingPropertiesWindowと呼ばれるonmousedownイベントを持っているDIV（ボーダー）で

<div id = "propertyArea" class="propertyArea" onmousedown="return StartResizingPropertiesWindow(event)" > 
    <iframe id="PropertyCtrl" name="PropertyCtrl" frameborder="0"></iframe> 
</div> 

を。 イベントの内部機能私は、マウスのダウンイベントが水平または垂直ボーダー側で発生したかどうかを示す必要があります。

どのように私は水平または垂直ボーダー側にマウスがダウンしたかどうかを示すことができますか？

Answer 1

ここでは、境界線をクリックした場所を返す関数です。番号5をあなたのボーダーの幅に置き換えてください。 ---もしその任意のヘルプの

var elo = document.getElementById('outside'); 
 

 
elo.onmousedown = function(e) { 
 

 
    detectSide(e); 
 

 
}; 
 

 
function detectSide(e) { 
 

 

 
    var X = e.pageX - elo.offsetLeft; 
 
    var Y = e.pageY - elo.offsetTop; 
 

 
    if (X < 5) { 
 
    alert('left'); 
 
    } 
 
    else if (X > elo.offsetWidth - 5) { 
 
    alert('right'); 
 
    } 
 
    else if (Y > elo.offsetHeight - 5) { 
 
    alert('down'); 
 
    } 
 
    else if (Y < 5) { 
 
    alert('top'); 
 
    } 
 
    //alert(Y); 
 

 
}

.outer { 
 
    height: 100px; 
 
    width: 150px; 
 
    background-color: red; 
 
    border: 5px solid red; 
 
} 
 
.inner { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: blue; 
 
}

<div class="outer" id="outside"> 
 
    <div class="inner"></div> 
 
</div>