以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?
函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>
or
函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>
以下是构建链接的两种方法,该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面,哪个更好。?
函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>
or
函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>
当前回答
这里还有一件更重要的事情要记住。第508节合规性。因此,我觉得有必要指出,您需要为JAWS等屏幕阅读器提供锚标记,以便能够通过选项卡将其聚焦。因此,解决方案“只使用JavaScript,忘记开头的锚”并不是其中的一个选项。只有当您无法让屏幕跳回到顶部时,才需要在href中启动JavaScript。您可以使用0秒的设置超时,让JavaScript在需要关注的地方启动,但即使是页面也会跳到顶部然后返回。
其他回答
也不
如果您可以有一个实际的URL,请将其用作HREF。如果有人中间点击你的链接打开一个新的标签,或者他们禁用了JavaScript,onclick就不会启动。
如果这是不可能的,那么您至少应该使用JavaScript和适当的单击事件处理程序将锚标记注入到文档中。
我意识到这并不总是可能的,但在我看来,在开发任何公共网站时都应该努力做到这一点。
查看Unobrusive JavaScript和Progressive增强(两个维基百科)。
这里还有一件更重要的事情要记住。第508节合规性。因此,我觉得有必要指出,您需要为JAWS等屏幕阅读器提供锚标记,以便能够通过选项卡将其聚焦。因此,解决方案“只使用JavaScript,忘记开头的锚”并不是其中的一个选项。只有当您无法让屏幕跳回到顶部时,才需要在href中启动JavaScript。您可以使用0秒的设置超时,让JavaScript在需要关注的地方启动,但即使是页面也会跳到顶部然后返回。
除非您使用JavaScript编写链接(这样您就知道它在浏览器中已启用),否则理想情况下,您应该为禁用JavaScript的浏览者提供适当的链接,然后在onclick事件处理程序中阻止该链接的默认操作。这样,启用JavaScript的用户将运行该功能,而禁用JavaScript的用户则将跳转到适当的页面(或同一页面中的位置),而不是只单击链接而不发生任何事情。
我同意其他地方的建议,即应该在href属性中使用常规URL,然后在onclick中调用一些JavaScript函数。缺陷在于,它们在调用后自动添加return false。
这种方法的问题是,如果函数无法工作或出现任何问题,链接将变得不可点击。Onclick事件将始终返回false,因此不会调用正常的URL。
有一个非常简单的解决方案。如果函数工作正常,则返回true。然后使用返回的值确定是否应取消单击:
JavaScript
function doSomething() {
alert( 'you clicked on the link' );
return true;
}
HTML
<a href="path/to/some/url" onclick="return !doSomething();">link text</a>
注意,我否定了doSomething()函数的结果。如果它有效,它将返回true,因此它将被否定(false),路径/to/some/URL将不会被调用。如果函数返回false(例如,浏览器不支持函数中使用的内容或其他任何错误),则将其否定为true,并调用路径/to/some/URL。
我基本上是在用渐进式增强来解释这篇实用文章。简单的答案是,您永远不会使用javascript:void(0);或#,除非您的用户界面已经推断JavaScript已启用,在这种情况下,您应该使用JavaScript:void(0);。此外,不要使用span作为链接,因为这在语义上是错误的。
在应用程序中使用SEO友好的URL路由,例如/Home/Action/Parameters也是一种很好的做法。如果你有一个链接到一个没有JavaScript的页面,你可以在之后增强体验。使用指向工作页面的真实链接,然后添加联机事件以增强演示。
这是一个示例。Home/ChangePicture是一个指向页面上的表单的工作链接,该表单带有用户界面和标准HTML提交按钮,但它被注入到带有jQueryUI按钮的模态对话框中看起来更好。无论哪种方式都有效,这取决于浏览器,满足移动优先开发。
<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>
<script type="text/javascript">
function ChangePicture_onClick() {
$.get('Home/ChangePicture',
function (htmlResult) {
$("#ModalViewDiv").remove(); //Prevent duplicate dialogs
$("#modalContainer").append(htmlResult);
$("#ModalViewDiv").dialog({
width: 400,
modal: true,
buttons: {
"Upload": function () {
if(!ValidateUpload()) return false;
$("#ModalViewDiv").find("form").submit();
},
Cancel: function () { $(this).dialog("close"); }
},
close: function () { }
});
}
);
return false;
}
</script>