Is there any way to bind a click event to a div's left border in jquery?

Question

I have a div

<div id="preview">
</div>

Is there any way to bind a click event to this div's left border?

Thanks in advance.

Answer 1

div {
    height:100px;
    border:4px solid black;
    padding:10px;
}

Please try this method

$('div').click(function(e){
   if(  e.offsetX < 5){
        alert('clicked on the left border!');
    }
});

Edit - Better version

$('div').click(function(e){
    if(  e.offsetX <= parseInt($(this).css('borderLeftWidth'))){
       alert('clicked on the left border!');
    }
});