Html Javascript 函数锚点 onclick 语法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10471810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript function anchor onclick syntax
提问by user1260310
I had following script for comment system working nicely until I put parameters into function call. Now instead of the function executing, it just reloads the page and bumps me up to the top. (Before, I had it not bumping and nicely inserting box.) Can anyone see error in following. Note, I gather that # is not preferred way to call functions from link, but other ways seemed rather complicated for this simple function call. Many thanks.
在我将参数放入函数调用之前，我有以下注释系统脚本运行良好。现在，它不再执行函数，而是重新加载页面并将我推到顶部。（之前，我让它没有碰撞并且很好地插入盒子。）任何人都可以看到以下错误。请注意，我认为 # 不是从链接调用函数的首选方式，但对于这个简单的函数调用，其他方式似乎相当复杂。非常感谢。
Note thispage is a text string ie "comments.php" while id and topicid are integers.
请注意，此页面是一个文本字符串，即“comments.php”，而 id 和 topicid 是整数。
<script>
function showReplyBox(id,topicid,thispage) {
var replybox = '<form action = "newcomment.php" method = "post"><input type="hidden" name="comid" value="';
replybox = replybox+ id + '">';
replybox = replybox + '<input type="hidden" name="topicid" value="';
replybox = replybox + topicid + '">';
replybox = replybox + '<input type="hidden" name="thispage" value="';
replybox = replybox + thispage + '">';
replybox = replybox + '<textarea autofocus placeholder="Reply to comment" id="replyarea" rows=1 cols=72></textarea><br><button>Reply</button></form>';
var empty = "";
document.getElementById('replybox').innerHTML = replybox;
}
</script>
<body>
//link to call function
<a href="#" onclick="showReplyBox(44,142,'comments.php');return false">Reply</a
//box inserted here
<div id="replybox"></div>
</body>
回答by Nauphal
replace the #in the anchor tag with javascript:void(0)
将#锚标记中的替换为javascript:void(0)
<a href="javascript:void(0);" onclick="showReplyBox(44,142,'comments.php');return false">Reply</a>
回答by Christofer Eliasson
Have the function return falseat the end to prevent the browsers default behavior of following the anchor.
让函数false在最后返回以防止浏览器跟随锚点的默认行为。
Here is a working Fiddle: http://jsfiddle.net/VhYd8/
这是一个工作小提琴：http: //jsfiddle.net/VhYd8/
回答by Sarvesh Kumar Singh
<body>
//link to call function
<a href="#" id="my_a" t_id=44 t_tid=142 t_php="comments.php">Reply</a>
<script>
function showReplyBox(event) {
event.preventDefault();
var tar_a = e.target;
var id = tar_a .getAttribute("t_id");
var topicid = tar_a .getAttribute("t_tid");
var thispage = tar_a .getAttribute("t_php");
var replybox = '<form action = "newcomment.php" method = "post"><input type="hidden" name="comid" value="';
replybox = replybox+ id + '">';
replybox = replybox + '<input type="hidden" name="topicid" value="';
replybox = replybox + topicid + '">';
replybox = replybox + '<input type="hidden" name="thispage" value="';
replybox = replybox + thispage + '">';
replybox = replybox + '<textarea autofocus placeholder="Reply to comment" id="replyarea" rows=1 cols=72></textarea><br><button>Reply</button></form>';
var empty = "";
document.getElementById('replybox').innerHTML = replybox;
}
doucument.getElementById("my_a").addEventListener('click',showReplyBox,false);
</script>
//box inserted here
<div id="replyarea"></div>
</body>
