一个关于用户体验的思考

在使用Ajax开发的网页中,为避免联动下拉列表因鼠标滚轮操作导致意外触发事件,作者分享了一种简单有效的方法:通过禁用滚轮事件并将焦点转移到body上,使滚轮正常用于页面滚动。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

现在的软件认真一点都要注重所谓用户体验(user experience),比如在 B/S 开发这块大家越来越喜欢用 Ajax,就是为了提高界面对用户的友好程度。我们知道 Ajax 开发中经常会使用联动下拉列表,或类似的“连锁反应”。前不久,在我开发的一个页面中使用了联动列表的技术,在向客户演示时,出现了一个尴尬的局面:

客户在选中了第一级下拉的选项后,程序无刷新读取数据,调出了相关的数据,是一个稍微长一点的表单;
随即客户想看看页面下方查出来的东西,于是向下滚动鼠标滚轮,可是这时焦点还在第一个下拉列表上。可以想见下面发生了什么:连续发生了 n 次选择不同选项的无刷新调用。

这种行为显然不是我所想看到的。虽然可以教客户每次选择后,要在页面空白处点击一下让下拉框失去焦点,但这显然不是个友好的设计。

很自然的,我想到一个办法:禁止可能产生联动效应的那些下拉框的鼠标滚轮事件,并将焦点转移到 body 上,让滚轮变成正常的滚动页面。代码非常简单:

<select onmousewheel="window.event.returnValue = false; document.body.focus();">
    
<option>1</option>
    
<option>2</option>
    
<option>3</option>
    
<option>4</option>
    
<option>5</option>
</select>

这个代码本身可以说是不值一提。现在采用 Ajax 开发越来越多,我觉得如果能总结出这方面一些小技巧,加强 Ajax 程序的用户体验,应该是有价值的。
对这方面有兴趣的朋友,请不吝指教。大家一起总结一些技巧出来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值