jQuery divの特定の部分をクリック

Question

リンクをクリックすると、divの特定の部分をクリックするためにjQueryが必要です。右側から正確に1pxと言うことができます。

私はjQueryをよく知っていますが、この場合にどのようにオフセットが実際に機能するのかよくわかりません。

HTML

<div class="container"> 
    <div class="toBeClicked">Click the right side of me!</div> 
</div> 

編集：私は参考のためにJSfiddleを追加しました：このcode.Iは2色boxes.Theの赤を作成https://jsfiddle.net/ebc59bah/1/

Answer 1

チェックがコンテナであるとアクアはあなたのdivです私はpageXの位置を取得し、私はalert（）メソッドをトリガー条件を満たす必要があります。私は余分なピクセルを追加する必要があるので余分なことをしたくないので、CSSの設定は特にhtmlとbodyを注意してくださいif条件：

$('.container').on('click',function(e){ 
 
    var xPosition=e.pageX; 
 
    if(xPosition>01 && xPosition<150){ 
 
    alert('Click'); 
 
    } 
 
});

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container{ 
 
    height: 150px; 
 
    width: 250px; 
 
    background-color:#FF0000; 
 
} 
 
.toBeClicked{ 
 
    position: inherit; 
 
    font-size: 150%; 
 
    height: 140px; 
 
    width: 150px; 
 
    background-color: #00FFFF; 
 
    word-break: keep-all; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="toBeClicked">Click the right side of me!</div> 
 
</div>