js点击超链接但不跳转并获取超链接id

在JavaScript中，如果你想要点击一个超链接（`<a>`标签），但是不真的让它跳转到新的页面，同时获取这个链接的ID，你可以使用事件监听器（如`addEventListener`）结合阻止浏览器的默认行为。以下是一个简单的示例：

// 获取所有带有"data-link-id"属性的<a>元素
var links = document.querySelectorAll('a[data-link-id]');

// 遍历每个链接
links.forEach(function(link) {
  // 添加点击事件处理器
  link.addEventListener('click', function(event) {
    // 阻止默认的链接跳转行为
    event.preventDefault();

    // 获取链接的ID（假设data-link-id就是ID的值）
    var linkId = link.getAttribute('data-link-id');

    // 打印或做其他处理链接ID
    console.log('链接ID:', linkId);

    // 如果你需要执行其他操作，这里可以添加
  });
});

在这个例子中，当你点击这样的链接时，不会实际跳转，而是会打印出链接的ID。你可以根据需要修改打印或者后续的操作。

相关问题

超链接加点击事件实现点击时跳转并调用ajax接口

好的，针对您的问题，我可以给您提供一种实现方式。

首先，您需要在HTML中添加一个超链接，并为其设置一个id属性，例如：

<a href="#" id="myLink">点击我</a>

接下来，在JavaScript中，您可以通过jQuery库来为该超链接添加点击事件，并在点击时同时跳转到指定的URL并调用ajax接口，例如：

$('#myLink').click(function(event) {
  event.preventDefault(); // 阻止默认的超链接跳转行为
  var href = $(this).attr('href'); // 获取超链接的href属性值
  $.ajax({
    url: 'your/api/endpoint',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
      // 处理ajax请求成功后返回的数据
      window.location.href = href; // 在ajax请求成功后跳转到指定URL
    },
    error: function(xhr, status, error) {
      // 处理ajax请求失败时的情况
    }
  });
});

在上述代码中，我们使用了jQuery的click()方法为超链接添加了点击事件，并在事件处理函数中阻止默认的超链接跳转行为。然后，我们获取了超链接的href属性值，并在ajax请求成功后跳转到该URL。

希望这个实现方式能够对您有帮助！

HTML语言实现电脑和手机点击同一超链接跳转不同链接

### 回答1：
可以通过使用媒体查询和CSS来实现。具体来说，可以使用@media查询来检测设备类型，然后使用不同的CSS样式来为电脑和手机设置不同的链接。例如：

@media screen and (max-width: 600px) {
/* 手机样式 */
a {
/* 手机链接 */
}
}

@media screen and (min-width: 601px) {
/* 电脑样式 */
a {
/* 电脑链接 */
}
}

这样，当用户在电脑上点击链接时，会跳转到电脑链接，而在手机上点击链接时，会跳转到手机链接。

### 回答2：
要实现电脑和手机点击同一超链接跳转不同链接，可以通过使用HTML语言中的媒体查询和JavaScript来实现。

首先，在HTML代码中，可以为超链接添加一个唯一的标识符，例如给链接添加一个id属性。

<a href="#" id="myLink">点击跳转</a>

接下来，在JavaScript中，我们可以根据设备类型（电脑、手机）来判断需要跳转到的链接，并根据判断结果进行跳转。

var link = document.getElementById("myLink");

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  // 如果是手机设备，则跳转到手机链接
  link.href = "手机链接地址";
} else {
  // 如果是电脑设备，则跳转到电脑链接
  link.href = "电脑链接地址";
}

以上的代码是一种简单的实现方式，它通过检测用户代理字符串来判断设备类型。如果用户代理中包含了Android、iPhone等关键词，则判断为手机设备；否则判断为电脑设备。

当用户在电脑上点击该超链接时，会根据判断结果跳转到电脑链接地址；当用户在手机上点击该超链接时，会跳转到手机链接地址。

注意：这里只是提供了一种实现方式，具体的实现方法可以根据实际需求进行调整和优化。

### 回答3：
要实现电脑和手机点击同一超链接跳转不同链接，可以使用HTML语言结合CSS媒体查询和JavaScript来实现。

首先，在HTML中，我们可以给超链接添加一个唯一的ID属性，以便在JavaScript中使用。例如：

<a href="#" id="myLink">点击此处</a>

接下来，我们可以使用CSS媒体查询来检测设备的屏幕宽度。通过判断屏幕宽度，我们可以决定是跳转到电脑端链接还是手机端链接。例如：

@media only screen and (max-width: 768px) {
  #myLink {
    display: none; /* 隐藏电脑端链接 */
  }
}

然后，在JavaScript中，我们可以根据设备类型和屏幕宽度来设置超链接的目标链接。例如：

const link = document.getElementById('myLink');

if (window.innerWidth <= 768) {
  link.href = '手机端链接'; // 设置手机端链接
} else {
  link.href = '电脑端链接'; // 设置电脑端链接（默认）
}

最后，将上述代码放置在页面加载完成后或者在窗口大小发生变化时执行的事件处理程序中，以确保根据设备类型和屏幕宽度动态设置超链接的目标链接。

通过上述方法，无论是在电脑还是手机上点击同一个超链接，都可以实现跳转到不同的链接。