使用标签和跨度的表

Question

我正在使用css和<a>标记与<span>的组合构建表格，如下所示：

<a class='header'>
  <span>User ID</span>
  <span>Name</span>
  <span></span>
</a>
<a href='somesite.php'>
  <span>7</span>
  <span>Ofek</span>
  <span><button type="button" onclick="somefunc()">Add to Favourites</button></span>
</a>

结果看起来像这样：

现在我的问题是，当我点击按钮时，我仍然被重定向到somesite.php，并且函数somefunc（）永远不会被调用，我看到某个按钮不能嵌套在跨度内，所以什么是替代让这个工作吗？我希望每当用户点击该行时它会将他重定向到somesite.php，但不是当他按下按钮时，我只想要调用func somefunc（）。

Answer 1

在button元素中嵌套a元素会在处理事件时产生问题，并且在HTML5 CR中为forbidden。

避免产生问题的简单方法是分离交互元素：

<a href='somesite.php'>
  <span>7</span>
  <span>Ofek</span>
</a>
  <span><button type="button" onclick="somefunc()">Add to Favourites</button></span>

在使用table标记的逻辑方法中，这是不可能的（因此），但如果您使用CSS模拟表格以使单元格为span元素（或者，通常，短语/内联/文本级元素。）

Answer 2

只需将return false添加到您的somefunc()代码中：

function someFunc () {
    // your existent code
    return false;
} 

并在HTML onclick="return somefunc()"中。但我也建议不使用onclick HTML属性，但要使用：

$("button").on("click", function (e) {
    e.preventDefault;
    somefunc();
    return false;
});

了解this topic here。

Answer 3

您可以将点击事件绑定到该按钮，然后使用preventDefault()：

<强> JS

function somefunc(e){
    e.preventDefault();
    alert("hey");
}
document.getElementById('abc').addEventListener(
    'click', somefunc, false
);

工作小提琴

http://jsfiddle.net/KRVUv/1/