CODEWITHSUNDEEP
jquery
Steve
Steve

Reputation: 4908

Determining if a div was clicked on its border

I'd like to implement a primitive eyedropper function, where an eyedropper cursor can be clicked on a div with a background color and this color pulled by reading the CSS style with jQuery. But what if the div's border is clicked and it's a different color? How do I pull that color? I don't see anything in the click event that tells me that the border was clicked rather than the contents.

Is there a way to sense a border click, without going through all the math of calculating where the border is and if the click was in that area?

Thanks for any ideas.

Upvotes: 4

Views: 2078

Answers (1)

Terry Young
Terry Young

Reputation: 3531

Is there a way to sense a border click, without going through all the math of calculating where the border is and if the click was in that area?

Short answer: No, not without going through math calculations.

Reason is, borders aren't elements, they are part of the DOM element and do not have their own separate event handlers.

But, to achieve what you want, it seems like you'll need at least these ingredients:

.offset(), .innerWidth(), innerHeight(), the 4 border widths via .css(), event.pageX() and event.pageY

Demo: http://jsfiddle.net/terryyounghk/YvFQX/

Familiarizing yourself with the box model will help a great deal in thought-processes like these, as well as developing a good code strategy.

Reference: http://www.w3.org/TR/CSS2/box.html

Upvotes: 6

Related Questions