document.getElementById() select other browsers element

Question

I am facing a very strange cross-browser behavior with javascript where code is called with the same page opened in different browsers (Firefox, Chrome and Safari in my case).

I tried to write the simplest code to reproduce it below. When hooking the onclick event for a button, I log something to the console and add a <p> element to the page:

document.getElementById('click').onclick = function() {
    console.log('click');
    var content = document.getElementById('content');
    var p = document.createElement('p');
    var t = document.createTextNode('click happened');
    p.appendChild(t);
    content.appendChild(p);
};

<button id="click">click</button>
<div id='content'></button>
 

With two or three browser opened on the same page, the event is fired in all windows.

I must precise I serve my code with https://browsersync.io:

browser-sync start --server --files "*.html, *.css, *.js"

What is going wrong? Is it a normal behavior?

My configuration

• MacOS 10.11.6 (11602.2.14.0.7)
• Safari 10.0.1
• Firefox 50.1.0
• Chrome 55.0.2883.95 (64-bit)
• browser-sync 2.18.5

Answer 1

This is not a bug but a feature of browsersync.io !!!