程序员在页面友好性上常犯的5种错误以及改正方法

WBOY

Freigeben： 2016-07-25 09:01:00

Original

1064 Leute haben es durchsucht

程序员在页面友好性上常犯的5种错误以及改正方法:

我是一个性情乖戾的web用户，但我想这也帮助促使我成为了一名优秀的web开发人员。当我看到一个网站上有让人不爽的设计时就会非常的恼怒，一些很简单的东西为什么做不好？下面是5种常见的可用性方面的错误，以及如何纠正这些问题的方法。给自己方便，也与人方便，确保自己不要犯这样的错误。

使用表达submit事件，不要用click事件；请用表单标签form!

我不知道遇到过多少次，当我使用回车键提交一个表单时(或手机上用箭头/输入键)，却什么都没发生。我只好又用鼠标点击提交按钮，表单终于有了反应。这是我最痛恨的一个网页可用性上的问题，一看就是业余人员做的。用鼠标点击提交按钮，或在手机上关闭键盘然后滚动到页面底部找到提交按钮，这都是讨厌的多余的动作，完全不需要这样做。你只需要使用submit事件，网页就会变得友好很多：

document.getElementById("myForm").addEventListener("submit",function(e) {

e.preventDefault();

// ... Do processing here. Yay for "enter" key submission!

return false;

});

如果你在什么地方犯了这样的错误，请立即纠正。

不要阻止当有[CONTROL]或 [META] 键按下时的点击事件

我是一个非常喜欢在浏览器新标签页里打开网页的人，我最近在找一个新房子，我会同时打开很多网站页面，点击里面的图片观看，但不幸的是，打开的这些页面都进入了同一个标签页。很讨厌。在你对任何链接使用preventDefault方法前，请先检查用户是否按下了[CONTROL] 或 [META] 键：

document.getElementById("myLink").addEventListener("click",function(e) {

// e.preventDefault(); (不好)

if(e.meta || e.ctrlKey) return; // 如果用户想新开一个窗口，请放行

e.preventDefault();