javascript - Avoid popup block with attached event listener -

i've got 10 buttons of class "servicebutton" contain custom attribute called "about". this:

<li>     <button type="button" class="servicebutton servicebutton-red" about="http://blabla">identity service</button> </li> <li>     <button type="button" class="servicebutton servicebutton-red" about="http://secondlink,etc">vpn</button> </li> 

i've got javascript on page loops through buttons of class , attaches listener them going value of attribute , open new window that. (i trying make site work both on mobile/touch events , desktop/click events).

var classname = document.getelementsbyclassname("servicebutton");  var open = function() {     var attribute = this.getattribute("about");     alert("start");     var win = window.open(attribute, '_blank');     win.focus();     alert("stop"); };  (var = 0; < classname.length; i++) {     classname[i].addeventlistener('touchstart', open, false); } 

the first alert gets called successfully, whereas second 1 not; neither new tab open. how can solve issue using js?(no jquery etc...)

avoid attaching multiple eventlisteners this, , add parent instead.

here's exemple, onclick event, can adapt problem , should trick.

http://jsfiddle.net/3r7rq8vc/

<ul>   <li about="http://www.google.com">google</li>   <li about="http://www.devrant.io">devrant</li> </ul>   <script> var listparent,     listenerid,     openlink;  openlink = function(e) {   var targetlink = e.target.getattribute('about');   // trying open   window.open(targetlink, '_blank') }   // prefer adding event listener parent listparent = document.queryselector('ul'); listenerid = listparent.addeventlistener('click', openlink); </script>