Stackoverflow Response: Determining if a div was clicked on its border
http://stackoverflow.com/questions/16162649/determining-if-a-div-was-clicked-on-its-border/16166232#16166232
HTML
<div class="A">
This is div
</div>
<div class="B">
This is div 2
</div>
<div id="log"></div>
CSS
div.A, div.B {
background-color:yellow;
width:50px;
height: 50px;
margin: 20px;
padding: 10px;
border-style: solid;
border-color: red;
}
div.A {
border-width: 10px 20px 30px 40px;
}
div.B {
border-width: 50px 60px 70px 80px;
}
JavaScript
var $log = $('#log');
$("div")
.on('mouseout', function () { $log.empty(); })
.on('mousemove click', function (event) {
$.extend(box, {
inner: {
top: box.offset.top + box.border.top,
left: box.offset.left + box.border.left,
right: box.offset.left + box.border.left + box.inner.width,
bottom: box.offset.top + box.border.top + box.inner.height
}
});
$.extend(box, {
inner: {
mouse: {
top: event.pageY - box.inner.top,
left: event.pageX - box.inner.left,
right: event.pageX - box.inner.right,
bottom: event.pageY - box.inner.bottom
}
}
});
$log.html(
[
'Box: ' + boxName,
'Mouse: ' + JSON.stringify(box.inner.mouse)
].join('<br>')
);
if (event.type == 'click') {
if (box.inner.mouse.top > 0 &&
box.inner.mouse.left > 0 &&
box.inner.mouse.right < 0 &&
box.inner.mouse.bottom < 0) {
alert('Clicked in yellow area');
} else {
alert('Clicked on border');
}
}
});