脚本不适用于移动设备

Question

所以我需要一个脚本，当点击它时，在URL的末尾添加一些额外的文本，如果它在'fragment'类下面。问题是它在桌面上运行得很好，但它不适用于移动设备。

点击横幅时，应该会显示http://www.google.com/extratext。

它在桌面上运行正常但是当我在我的手机上点击此横幅时，它会导致原始链接，即http://www.google.com

以下是代码：

<script type="text/javascript">
NodeList.prototype.addEventListener = function(type, handler) {
    for(var node of this)
        node.addEventListener(type, handler);
}

HTMLCollection.prototype.addEventListener = function(type, handler) {
    for(var node of this)
        node.addEventListener(type, handler);
}
var hasExecuted = false;       
var links = document.getElementsByClassName("fragment");
links.addEventListener("click", function () {
    if(hasExecuted) return; 
     for(var link of links)
         link.href += "extratext";
     hasExecuted = true; 
});
</script>

.fragment {
    font-size: 12px;
    border-bottom: 1px solid #e8e8e8;
    height: 100%;
    padding: 18px 10px 10px 10px;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
}

.fragment:focus, .fragment:hover, .fragment:visited {
  background-color: #f7f7f7;
  text-decoration: none;
}

.fragment img { 
    float: left;
    margin-right: 10px;
}

.styleraise { 
    color: black;
    font-size: 18px;
    display: inline;
} 

.styleraise1 { 
   float: right;
 font-weight: bold;
background-color: #2bde73;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	color: white;
	font-size:14px;
        padding :1px 6px 1px 6px;
}

.textpara {
    color:grey;
   line-height: 150%;
padding-top: 5px;
}
.imgbor {
border: 1px solid #e8e8e8;
  Height: 50px;
  width: 50px;
}

<a class="fragment" href="http://www.google.com/" target="_blank">
    <div>
    <img class="imgbor" src ="https://image.winudf.com/1775/0248f14fdedd6064/icon=150x.png" alt="some description"/> 
    <span class="styleraise">MagicCamera</span><span class="styleraise1">It's free</span>
    <div class="textpara">
        MagicCamera can take photos of different style, with a flashlight function.</div>
</div>
</a>