JS第二次點擊打開一個href的函數？

Question

我正在尋找一個JS函數來使href僅在第二次點擊時打開，而不是第一次點擊。

這不是雙擊，而是第二次點擊，我希望第二次點擊在第一次點擊後甚至幾秒鐘就可以工作。

有人知道我該怎麼做？

非常感謝您的幫助！

朱

Answer 1

你可以做這樣的：

const 
 
    clickedLinks = new Map(); 
 
    anchor = document.getElementById('linkA'); 
 
    
 
function onLinkClicked(event) { 
 
    if (!clickedLinks.has(event.target.id)) { 
 
    clickedLinks.set(event.target.id, true); 
 
    event.preventDefault(); 
 
    console.log(`Link to ${event.target.href} block, first time clicked.`); 
 
    return; 
 
    } 
 
    
 
    console.log(`Allow link ${event.target.href}`); 
 
} 
 
    
 
anchor.addEventListener('click', onLinkClicked); 
 

<a id="linkA" href="stackoverflow.com" target="_blank">Stack Overflow</a>

這是一個有點多了一個簡單的用例與單個鏈接，但這個效果很好，即使你有很多鏈接，你想有相同的行爲。

你還可以：

• 設置一個布爾值，並檢查它是否已經設置
• 分配類的鏈接，並只允許當類已設置的點擊瀏覽。
• 在元素上設置一個數據屬性，並檢查它是否有值或設置或刪除。

有可能有更多的方法來實現你想要的行爲。

Answer 2

<a href = javascript:{window.clickCount?location.href='https://www.google.com':window.clickCount=1}>hahahahahaha</a> 

只是固定的https://www.google.com你的鏈接

Answer 3

$(document).ready(function() 
 
{ 
 
    $('.second-click').on(
 
    'click', 
 
    function(e) 
 
    { 
 
     e.preventDefault(); 
 
     var self = $(this); 
 
     if($(this).data('clicked') == 1) { 
 
     clickLink(self); 
 
     self.data('clicked', false); 
 
     } 
 
     else { 
 
     $(this).data('clicked', 1); 
 
     setTimeout(function(){ 
 
      self.data('clicked', false); 
 
     }, 10000); 
 
     } 
 
    } 
 
); 
 
    
 
    function clickLink($link){ 
 
    console.log('link was clicked'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="second-click">Click me!</a>

所以在這裏我們檢查鏈接是否被檢查一次。如果是這樣，進一步處理。在10秒內，需要再次檢查兩次。希望這有助於

Answer 4

document.getElementById('a').onclick = function() { 
 

 
    if (this.clickedBefore) { 
 
    a.setAttribute('href', 'http://www.google.com'); 
 
    a.setAttribute('_target', '_blank'); 
 
    this.clickedBefore = !this.clickedBefore; 
 
    } else { 
 
    this.clickedBefore = true; 
 
    } 
 
}

<a href="#" id="a">My Link</a>

Answer 5

$(function(){ 
 
    var $clickLinks = $('.social').find('ul').children('li'); 
 
    \t $($clickLinks).find('a').attr('onClick','return false'); 
 
    \t $($clickLinks).on('click', 'a', function(events){ 
 
    \t \t var nearBy = $(this).closest('li'); 
 
    \t \t 
 
    \t \t $($clickLinks).each(function(index, element) { 
 
       $(this).removeClass('selected'); 
 
    \t   $(this).find('a').attr('onClick','return false'); 
 
      }); 
 
    \t \t 
 
    \t \t nearBy.addClass('selected'); 
 
    \t \t if(nearBy.hasClass('selected')) 
 
    \t \t { 
 
    \t \t \t $(this).attr('onClick',"return true"); 
 
    \t \t \t 
 
    \t \t } 
 
    \t \t else { 
 
    \t \t \t $(this).attr('onClick','return false'); 
 
    \t \t \t 
 
    \t \t } 
 
    \t }); 
 
    
 
    });

<ul> 
 
    \t <li><a href="abc.html" target="_blank" >one</a></li> 
 
     <li><a href="abc.html" target="_blank" >two</a></li> 
 
     <li><a href="abc.html" target="_blank">three</a></li> 
 
    </ul>

希望這是你正在尋找:)

Answer 6

感謝所有幫助答案。

我沒有身份證供我的HREF，但一個類。

這裏是我的href：

<a class="ult-new-ib-link" href="http://matieresetcouleurs.ch/parution-elle-decoration/" title="En savoir plus"></a> 

我試圖通過改變ID到類名的第一個解決方案，但它不工作。 這裏是我的嘗試：

const 
    clickedLinks = new Map(); 
    anchor = document.getElementByClassName('ult-new-ib-link'); 

function onLinkClicked(event) { 
    if (!clickedLinks.has(event.target.ClassName)) { 
    clickedLinks.set(event.target.ClassName, true); 
    event.preventDefault(); 
    console.log(`Link to ${event.target.href} block, first time clicked.`); 
    return; 
    } 

    console.log(`Allow link ${event.target.href}`); 
} 

anchor.addEventListener('click', onLinkClicked); 

我想設置此功能severals HREF因此，包括直接在功能href是不是爲我工作的解決方案。

順便說一句，我在wordpress上這樣做，所以我不喜歡通過添加li或腳本來更改HTML。

我使用插件在模板中添加JS函數。