小心使用input的onchange事件

六月 17th, 2014 2,380 留下评论 阅读评论

入职两个月了,做了2个项目,都用到了这个功能:在input中输入进行搜索,每次修改(键盘敲击)都会进行一次搜索结果返回,然后对返回的结果数据进行一些js和ajax的操作。

第一次做的时候,先尝试了input的onchange事件,发现只有在焦点脱离之后才会发生,然后换到了onkeyup事件,解决了需求,遗留问题就是把这两个事件都给保留了,导致了下面问题的发生。

当在input里敲击键盘不断加载数据时(用jQuery.load加载的片段页面),页面中有绑定了onclick事件的<a>标签,但是鼠标第一次点击<a>标签死活不响应onclick事件,要第二次点击才响应,很诡异。 一直想不到是什么原因,换了绑定事件的各种方法也不起作用。[em85]

这个问题一直存在但是无法修复隔了差不多有一个月之久!在偶然的因素下,意识到第一次点击的时候又触发了数据加载刷新了片段页面!于是很快就联想到这是onchange事件在响应!第一次点击就这么被onchange事件吃掉了! :twisted: 删除了onchange事件,于是问题迎刃而解。

这样想来,如果input绑定了onchange事件,很可能因此影响到页面中其他元素的事件,且用且珍惜啊!

Categories: Javascript 标签:,
  1. dylan | #沙发
    六月 28th, 2014 08:15

    好像很厉害的样子。 看到js和ajax就以为你在写前端。

    • 前后都有写,不过HTML和CSS凑合凑合写大部分可以抄原来的

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif