如何防止在html5中单击按钮时页面刷新？答案

【问题标题】：How to prevent page refresh on button click in html5?如何防止在html5中单击按钮时页面刷新？
【发布时间】：2012-12-13 20:57:00
【问题描述】：

我想防止在单击按钮时重新加载页面。单击时我只想交换按钮值而不刷新页面。我该怎么做？

<button id="4">134</button> // button 1 
<button id="5">234</button> // button 2

点击按钮 1（id 为“4”的按钮）后，我想要以下结果

// After clicking button 1
<button id="4">234</button> // button 1
<button id="5">134</button> // button 2

如何在不重新加载/刷新 html 页面的情况下执行此操作。

【问题讨论】：

你能给我们一个你已经拥有的代码示例吗？
// 按钮 1 // 按钮 2 .....onclick按钮 id(4)..id=4 和 id=5 的值交换即（234 将在 id=5 和 134 将 id=4）。无需重新加载/刷新 html 页面。
@user1934833，我更新了我对提供者的回答。看一看。 stackoverflow.com/a/14072548/358834

标签： javascript html

【解决方案1】：

UpHelix 的回答解决了您重新加载页面的主要问题。许多浏览器上按钮的默认类型被重置，这会导致页面重新加载，如问题How do i make an html button not reload the page?中所述的答案@

关于你的价值交换任务，我的代码可以为你工作

$(function() {
        $('button#4').click(function() {
            var firstButtonVal = $('button#4').text();
            var secondButtonVal = $('button#5').text();
            $('button#4').text(secondButtonVal);
            $('button#5').text(firstButtonVal);
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="4" type="button">134</button>
<button id="5" type="button">234</button>

【讨论】：

【解决方案2】：

为了防止刷新，只需添加 type="button"

<button id="4" type="button">134</button> 
<button id="5" type="button">234</button>

至于交换值我重申 bmargulies，你需要学习 javascript，或者让你的问题更清楚，这样我们才能给你更好的答案。

但是对于您的模糊问题（说明单击#4 后文本应该交换）这里是使用 jQuery 的一些方向。这样做只会交换一次。

<script type="text/javascript">
    $(function(){
        $('#4').click(function(){
            $(this).html(234);
            $('#5').html(134);
        });
    });
</script>

有关 jQuery 的帮助：http://api.jquery.com/

【讨论】：

这如何将任何值移动到任何地方？
@bmargulies，他在我发帖时编辑了他的问题。在编辑之前，他想做的就是阻止刷新。

【解决方案3】：

您提出了一个非常广泛的问题，它与 HTML5 完全无关。要获得此功能，您必须将 javascript 处理程序附加到您的按钮。有许多不同的 javascript 库可以帮助您，或者您可以编写原始 javascript。

你必须去学习很多关于 javascript 编码的基础知识才能完成这个。

【讨论】：

你能给我一些可以做到这一点的javascript代码吗？