1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import _ from 'lodash'
const doesNodeContainClick = (node, e) => {
if (_.some([e, node], _.isNil)) return false
// if there is an e.target and it is in the document, use a simple node.contains() check
if (e.target) {
_.invoke(e.target, 'setAttribute', 'data-suir-click-target', true)
if (document.querySelector('[data-suir-click-target=true]')) {
_.invoke(e.target, 'removeAttribute', 'data-suir-click-target')
return node.contains(e.target)
}
}
// Below logic handles cases where the e.target is no longer in the document.
// The result of the click likely has removed the e.target node.
// Instead of node.contains(), we'll identify the click by X/Y position.
// return early if the event properties aren't available
// prevent measuring the node and repainting if we don't need to
const { clientX, clientY } = e
if (_.some([clientX, clientY], _.isNil)) return false
// false if the node is not visible
const clientRects = node.getClientRects()
// Heads Up!
// getClientRects returns a DOMRectList, not an array nor a plain object
// We explicitly avoid _.isEmpty and check .length to cover all possible shapes
if (!node.offsetWidth || !node.offsetHeight || !clientRects || !clientRects.length) return false
// false if the node doesn't have a valid bounding rect
const { top, bottom, left, right } = _.first(clientRects)
if (_.some([top, bottom, left, right], _.isNil)) return false
// we add a small decimal to the upper bound just to make it inclusive
// don't add an whole pixel (1) as the event/node values may be decimal sensitive
return _.inRange(clientY, top, bottom + 0.001) && _.inRange(clientX, left, right + 0.001)
}
export default doesNodeContainClick