Я создаю таблицу с использованием 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().
Вложение в button
элемента в a
элемента создает проблемы при обработке событий, и это запрещено в HTML5 CR.
Простым способом избежать проблемы является разделение интерактивных элементов:
<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
(или, как правило, элементами фразы/встроенного/текстового уровня),
Просто добавьте 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;
});
Читайте об этой теме здесь.
return
к своему onclick
. onclick="return somefunc()"
Вы можете связать событие click с кнопкой, а затем использовать preventDefault()
:
JS
function somefunc(e){
e.preventDefault();
alert("hey");
}
document.getElementById('abc').addEventListener(
'click', somefunc, false
);
рабочая скрипка