在点击事件中插入链接

我有一个脚本，用户点击“给我们打电话”，出现号码并发送GA事件。在点击事件中插入链接

是否有可能将号码链接到电话号码 - 链接，以便您可以拨打移动电话号码？

我试着插入一个ID，但是这个号码不能在手机上点击。

感谢您的任何答案， DAV

这是脚本：

function ipTrackButton(){ 
    if(window.jQuery){ 
     var $ = jQuery; 

     var phonenumber = '+31 (0)20 - 679 62 22', 
      holder = $('#text-5 > .textwidget'), 
      newHTML = 'T: <span id="ipCallButton">Bel ons | Call us</span><br>E: <a href="mailto:[email protected]">[email protected]</a>', 
      body = $('body'); 

     //Inject styles 
     var style = '#ipCallButton { background-color:#eaeaea;padding:5px 8px;cursor:pointer;text-decoration:underline; } #ipCallButton.ipClicked { text-decoration:none;cursor:default; } '; 

     body.append('<style>'+style+'</style>'); 

     //Set new content 
     holder.html(newHTML); 

     //Set event 
     body.on('click', '#ipCallButton:not(.ipClicked)', function(){ 
      var _this = $(this); 
      _this.html(phonenumber); 
      _this.addClass('ipClicked'); 

      //Send event 
      ga('send', 'event', 'Contact', 'Click', 'Telefoonnummer'); 
     }); 
    } 
    else { 
     setTimeout(ipTrackButton, 50); 
    } 
} 

ipTrackButton();

来源

2017-08-31 dav isra

你的代码的问题是，在任何时候你创建一个<a href="tel:...">元素。你所要做的就是将元素的innerHTML设置为不可点击的电话号码。

你必须真正插入<a>元素：

body.on('click', '#ipCallButton:not(.ipClicked)', function(){ 
    var _this = $(this); 
    _this.append($('<a href="tel:' + phonenumber + '">' + phonenumber + '</a>')); 
    _this.addClass('ipClicked'); 
    //Send event 
    ga('send', 'event', 'Contact', 'Click', 'Telefoonnummer'); 
});

说实话，我认为一个更好的解决办法是直接添加<a>在HTML和CSS与隐藏，直到点击。你并不真正需要的JavaScript的大部分时间你在做什么：

function ipTrackButton(){ 
 
    if(window.jQuery){ 
 
     var $ = jQuery; 
 
     var body = $('body'); 
 

 
     //Set event 
 
     body.on('click', '#ipCallButton:not(.ipClicked)', function(){ 
 
      var _this = $(this); 
 
      _this.addClass('ipClicked'); 
 
      // removed: send ga event 
 
     }); 
 
    } 
 
    else { 
 
     setTimeout(ipTrackButton, 50); 
 
    } 
 
} 
 

 
ipTrackButton();

#ipCallButton:not(.ipClicked) .afterclick { 
 
    display: none; 
 
} 
 
#ipCallButton.ipClicked .beforeclick { 
 
    display: none; 
 
} 
 
/* copied */ 
 
#ipCallButton { background-color:#eaeaea;padding:5px 8px;cursor:pointer;text-decoration:underline; } #ipCallButton.ipClicked { text-decoration:none;cursor:default; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
T: <span id="ipCallButton"> 
 
    <span class="beforeclick">Bel ons | Call us</span> 
 
    <span class="afterclick"> 
 
     <a href="tel:+31 (0)20 - 679 62 22">+31 (0)20 - 679 62 22</a> 
 
</span><br> 
 
E: <a href="mailto:[email protected]">[email protected]</a>

来源

2017-08-31 22:16:16 amphetamachine

谢谢您的回答！不过，您的解决方案会在我的桌面版Chrome中同时显示文字和数字;该数字是可点击的。在我的iPhone上只显示数字，但仍然不可点击。您的其他解决方案看起来很有希望，但我希望修复当前的脚本。 –

@davisra刚试过在Chrome浏览器中剪下来，它适用于我。看起来您需要更好地了解为什么会发生这种情况，然后再尝试整合我的解决方案。 – amphetamachine

在点击事件中插入链接

回答

相关问题