html5 datalist 单击事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5 datalist 单击事件相关的知识,希望对你有一定的参考价值。

html5 中的 <datalist>标签中,当选择某项时,是触发什么事件啊??急...
不要在网上找些怎么用的...我只想知道选中项后会触发什么事件!!!!!

参考技术A 触发input的change事件,肯定不会触发datalist什么事件。datalist只是存放input候选值的地方。
好像连input的change事件都没触发,什么事件都没触发。追问

唉...郁闷!!

参考技术B <datalist> 标签定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值。
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

就好像你双击用户名的文本框时下面会出现你曾经输入过的用户名
样子是一样的但本质不同
datalist 提供的是固定的可选值
比如一个搜索的文本 你可以这样设置
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="分类1">
<option value="分类2">
<option value="分类3">
</datalist>

你可以看下这个效果
可以引导用户输入搜索的关键字

希望这个解释能帮助你理解这个标签

我自己写 像复制粘贴的吗?本回答被提问者和网友采纳
参考技术C 什么软件?追问

html5...你不懂?!

双击和单击事件冲突解决方法

双击和单击事件冲突解决方法:
关于单击事件和双击事件,如果单独拿出来都是非常简单,这里也就不多介绍了,具体可以参阅jQuery的click事件jQuery的dblclick事件一章节,但是如果同一个元素同时绑定了单击事件和双击事件,那么就会造成冲突现象,比如我们双击此元素指向触发双击事件,但是也完全满足单击事件的条件,不但双击事件触发了,单击事件同样也会被触发,下面就通过代码实例介绍一下如何解决它们的冲突问题,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  var timer=null; 
  $("#bt").bind("click",function(){
    clearTimeout(timer); 
    timer=setTimeout(function(){
      $("#thediv").append("单击事件触发"); 
    },300); 
  }) 
   
  $("#bt").bind("dblclick",function(){
    clearTimeout(timer);
    $("#thediv").append("双击事件触发"); 
  }) 
}) 
</script> 
<body>
<div id="thediv"></div>
<input type="button" id="bt" value="查看效果"/>
</body>  
</html>

以上代码实现解决了单击和双击冲突的现象,单击或者双击按钮的时候只会有一个事件触发。
一.实现原理:
原理其实及其简单,就是延迟单击事件处理函数中相关代码的执行(当然并不是说单击事件没有触发),也就是当第一次点击按钮的时候,如果300毫秒内没有点击第二次,那么就认为这是一次单击事件,然后执行相关的代码,如果300毫秒内又点击了第二次,那么就会取消定时间函数的执行,单击事件处理函数中的相关代码将不会被执行,只会执行双击事件处理函数中的代码。
二.相关阅读:
1.bind()可以参阅jQuery的bind()方法一章节。
2.clearTimeout()函数可以参阅window对象的clearTimeout()方法一章节。
3.setTimeout()函数可以参阅window对象的setTimeout()方法一章节。 
4.append()函数可以参阅jQuery的append()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13135

更多内容可以参阅:http://www.softwhy.com/jquery/

以上是关于html5 datalist 单击事件的主要内容,如果未能解决你的问题,请参考以下文章

选择输入框的应用

html5 datalist 选中option选项后的触发事件

innerHTML 不适用于 IE 中的 <datalist> HTML5 元素

如何在 DataList 中显示条件复选框

当控件位于 asp.net 的 UpdatePanel 中时,如何使用 Jquery 获取单击事件?

VB.net 中 ,datalist.datasource 转换成datatable,如何转?