Find Correct Event Target Element Using document.elementFromPoint

While creating the position based visual elements i.e. maps/charts on my web page, I often came across the situation where more than one elements are stacked above each other but not in parent-child hierarchy i.e. absolutely positioned. To handle the events such as click, in this case, the target is the topmost element (the element which is added last). And since the elements are not in hierarchy, the bubbling also, will not traverse to bottom elements.  What if we want the event target, to be some other element (based on some selector such as class name) which is lying below.

Here I describe a solution using “document.elementFromPoint”. I have used jQuery for selection purpose.

The key here is, “document.elementFromPoint” returns the currently visible element at given coordinates. So if the current element is not matching the selector, hide it, using display:none and use “document.elementFromPoint” again. It is done it recursively, so that during return from the function, elements are re-shown, to return to previous state.

Advertisements

SOME INTERESTING FACTS ABOUT JAVASCRIPT

Based on my experience with javascript, I came across some interesting facts about javascript. Here is the list of few of those:

  1. To include javascript in a web-page we can have inline javascript within script tag as well as external javascript file provided as src attribute of script tag. What happens when both are used for the same script tag?
<script src="somefile.js">
   function HelloWorld() {
      alert("Hello World");
   }
</script> 

Well in this case the content of the external file will be picked and the inline script will be ignored silently. We can visualise the behavior as the inline content of the script tag is replaced by script in external file.

In case you are familiar with AngularJS, does it ring a bell about ng-include or a directive with a template html.

  1. “noscript” tag

If you want to check whether the browser supports javascript or browser’s support to javascript is turned off by user and in that case if you want to show some message the tag is designed for that purpose.

 

<noscript>
   This site will work only on javascript supporting browser
</noscript>
  1.  Something interesting about typeof:
  • Even though typeof is an operator, so no parenthesis required but there is no problem if parenthesis are used e.g.
typeof(“abc”); //returns string
typeof “abc”; //returns string
  • typeof NaN is number.
  • typeof null is object, because null is considered to be empty object.
  1. 0.1 + 0.2 is not equal to 0.3

It is because the way floating numbers are stored. So never reply on such comparisons. You can use toFixed() to solve this problem.

  1. An array can be truncated using it’s length e.g.

 

var arr = [1, 2, 10, 4, 4];
 //truncate the last 2 values of the array;
 arr.length = 3;
 //is similar to
 arr.splice(3); 
  1. Apply isNaN on different values.
isNaN(“ ”); //false
isNaN(true); //false
isNaN(null); //false
isNaN(“0xf”) //false
isNaN(undefined) //true
isNaN(“hello”) //true

Thumb rule is any value which can be converted to a valid number can not be categorised as NaN. In the cases above “ ” can be converted as 0, true can be converted as 1, null can be converted as 0, “0xf” is valid hexadecimal number so all these values are not treated as NaN whereas undefined and “hello” can’t be converted to any number so these are treated as NaN.

 

  1. parseInt() 2nd parameter:

The second parameter of parseInt function is the radix parameter, which tells the function about the base number format (decimal, octal or hexadecimal). If the radix parameter is not provided and the string begins with “0x”, the radix is hexadecimal i.e. 16 and if the string begins with any other value, the radix is assumed to be decimal i.e. 10

  1. Some interesting outcomes of euality operator (==)
false == " "               //true 
0 == " "                   //true
NaN == NaN                 //false
false == 0                 //true
true == 1                  //true
null == undefined          //true
true == 2                  //false
"5" == 5                   //true