HTML5 中的纯 JavaScript 链接

Question

我知道这个问题到处都有答案，但结果没有一个让我满意。

有没有官方的 HTML5 方法来处理没有 href 的可点击元素？

我一直在做的就是这样：

<a>Link</a>

当然，它们可能有 ID 或类，但举个例子并不重要。我让它们可以通过脚本点击，并且没有在其中添加任何href。有些人认为它不正确。

其他选项是：

<a href="#">Link</a>
<a href="javascript:void(0);">Link</a>

说实话，我讨厌这种方法，因为它使 href 属性包含垃圾。

甚至另一种方法是使用另一个标签：

<div>Link</div>

有什么标准化的方法吗？或者，也许任何没有正确 href 的方式都是不正确的，因为众所周知，链接实际上应该为非 js 人提供正确的 href。

编辑

好的，我看到答案是我所期望的。需要明确的是，我知道如何让它工作，我正在寻找语义正确的方法来做到这一点。如果你们认为通过 HTML 验证的就是好的 HTML，那你就错了。

Answer 1

有效期：

在没有href 属性的情况下使用<a> 没有问题。在 HTML5 中，它是 placeholder hyperlink。这是完全有效的。你可以try validating。没有错误或警告。

示例用法：

<a id='mya'>Link</a>

$(function(){
    $('#mya').click( function() {
        alert('Click No href'); 
    });
});

See it running

语义和其他一切：

阅读here 了解详细解释和推理。

Answer 2

说实话，我讨厌这种方法，因为它使 href 属性包含垃圾。

当然，垃圾是尝试删除链接中的href 属性，因为它是这样工作的，Google 和其他搜索引擎无法使您的网络可导航。你可以用你喜欢的风格制作。我给你举个例子：

示例 1

带有data-*属性：

 <a data-link="http://newurl.com">link</a>
 <script>
     $('a').each(function() {
         $(this).on('click', function(e)  {
              var ds = $(this).dataset();
              window.location.href = ds.link;
         });
     });
  </script>

示例 2

js中有数组，html中有id

 <a id="newurl">link</a>
 <script>
     var aLinks = [];
     aLinks['newurl'] = "http://newurl.com";
     $('a').each(function() {
         $(this).on('click', function(e)  {
              window.location.href = aLinks[$(this).attr('id')];
         });
     });
  </script>

根据你的喜好，选择你喜欢的。

Answer 3

JavaScript

function popup1() = {
     alert('Please do this....');
 }

HTML 标记

 <div onclick='popup1'> Do you want to join? </div>

或者使用jQuery

​​>

HTML 标记

 <div class='popup1'> Do you want to join? </div>

jQuery

 $('.popup1').click(function(){   
    alert('Please do this....');
 });

或者使用更干净的jQuery

​​>

^{HTML 更干净，但 JS 更糟糕——你需要找到一个很好的平衡}

<div > Do you want to join? </div>
<div > Newsletter? </div>
<div > Cookies? </div>

jQuery

$('div').click(function(){   
       if ($(this).text() == 'Do you want to join?')
           alert('Please do this....');
    if ($(this).text() == 'Newsletter?')
           alert('Please do this....');
    if ($(this).text() == 'Cookies?')
           alert('Please do this....');
     });