如何使用 JavaScript 通过快捷方式单击按钮而不导致页面重新加载

发布于 2024-10-12 16:33:42 字数 1043 浏览 7 评论 0原文

我的 Web 应用程序中需要一些快捷方式，它们的作用与用户单击按钮或使用快捷键按下按钮时的作用相同。

我简化了代码来向您展示我的问题：

<html>
<head><script src="jquery-1.4.2.js" type="text/javascript"></script></head>
<form>
    <body>
        <div id="myDiv">text</div>
        <input name="cmdChangeText" type="submit" value="change text" onclick="document.getElementById('myDiv').innerText='text is changed'; return false;" />

        <input name="cmdTestButton" type="submit" value="hello" onclick="alert('hello'); return false;" accesskey='z' />
    </body>
</form>
<script type="text/javascript">
    document.onkeydown = function() {
        if (event.keyCode == 83) { //83 = 's'
            window.$('[accesskey=z]').click();
        }
    }
</script>
</html>

第一个按钮更改文本。当您单击第二个按钮，或通过快捷键（IE 中的 Alt + Z）单击它时，您会收到警报，但页面不会重新加载：文本仍然存在改变了！

当我按下某个按钮（本例中的 S）时，我确实收到了警报，但页面会重新加载！为什么 return false; 会这样被忽略，我该怎么办？

原文

I need some shortcuts in my web application, that will do the same as when a user clicks on a button, or presses the button with the accesskey.

I simplified my code to show you my problem:

<html>
<head><script src="jquery-1.4.2.js" type="text/javascript"></script></head>
<form>
    <body>
        <div id="myDiv">text</div>
        <input name="cmdChangeText" type="submit" value="change text" onclick="document.getElementById('myDiv').innerText='text is changed'; return false;" />

        <input name="cmdTestButton" type="submit" value="hello" onclick="alert('hello'); return false;" accesskey='z' />
    </body>
</form>
<script type="text/javascript">
    document.onkeydown = function() {
        if (event.keyCode == 83) { //83 = 's'
            window.$('[accesskey=z]').click();
        }
    }
</script>
</html>

The first button changes the text.
When you click the second button, or click it through accesskey (Alt + Z in IE), you get the alert, but the page does not reload: the text is still changed!

When I press some button, the S in this example, I do get the alert, but the page gets reloaded! Why is the return false; ignored this way, and what can I do about it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淑女气质 2024-10-19 16:33:42

我将摆脱 onclick="alert('hello'); return false" 内容并使用 jQuery 附加事件。

之后，您可以尝试取消事件冒泡：

$('#myInput2').click(
    function() {
        alert('hello')
        return false
    }
 )

只是预感。

I would get rid of the onclick="alert('hello'); return false" stuff and attach events using jQuery.

After that, you can try cancel the event bubbling:

$('#myInput2').click(
    function() {
        alert('hello')
        return false
    }
 )

Just a hunch.

回复收藏 0 原文

潦草背影 2024-10-19 16:33:42

为按钮指定不同的名称，在本例中我使用了“test1”和“test2”并添加以下代码。

$('input[name=test1]').click( function(e){
    e.preventDefault();
    $('#myDiv').innerText('text is changed');
});

$('input[name=test2]').click( function(e){
    e.preventDefault();
    alert('hello');
});

默认情况下，“提交”类型的输入将提交页面。对事件使用“preventDefault()”方法将毫不奇怪地阻止默认操作。如果您想要重新加载页面，只需删除此行即可。

Give the buttons different names, in this example I have used 'test1' and 'test2' and add the following code.

$('input[name=test1]').click( function(e){
    e.preventDefault();
    $('#myDiv').innerText('text is changed');
});

$('input[name=test2]').click( function(e){
    e.preventDefault();
    alert('hello');
});

An input of type 'submit' will submit the page by default. Using 'preventDefault()' method on the event will, unsurprisingly prevent the default action. If you want the page to reload just remove this line.

回复收藏 0 原文

~没有更多了~