我有一個簡單的選擇菜單，其中包含一些在頁面加載時動態插入的列表項。雙擊列表項打開頁面
<select id="viewTasks" name="viewTasks" size=10 style="width: 100%;">
<option>Task 1</option>
<option>Task 2</option>
<option>Task 3</option>
<option>Task 4</option>
</select>
我想向用戶顯示一個特定頁面時，他/她雙擊任何單一列表項。我想要顯示的頁面將根據列表項目字符串中的數據顯示。
我應該怎麼做呢？
這裏是一個小提琴，你想要做什麼（純JavaScript）：http://jsfiddle.net/S3KN4/3/
var initializeListeners = function() {
console.log('initializeListeners');
var viewTasksElement = document.getElementById('viewTasks');
viewTasksElement.addEventListener('dblclick', showPage, false);
}
var showPage = function() {
console.log('showPage');
var viewTasksElement = document.getElementById('viewTasks');
var taskText = getSelectedTaskText(viewTasksElement);
if (taskText) {
// do something
console.log('selected task: ' + taskText);
}
};
var getSelectedTaskText = function (selectElement) {
console.log('getSelectedTaskText');
if (selectElement.selectedIndex == -1) {
return null;
} else {
return selectElement.options[selectElement.selectedIndex].text;
}
}
initializeListeners();
這工作完美，做了我需要的一切。非常感謝。 –
$(document).ready(function()
{
$("#viewTasks").dblclick(function()
{
var index = $(this).find(":selected").index();
if(index == 0)
{
//do task 1
}
else if(index == 1)
{
// do task 2
}
});
});
使用jQuery的.dblclick()事件：
$('#viewTasks').dblclick(function() {
alert('The item was double-clicked!');
});
$('#viewTasks option').dblclick(function() {
//do something
});
或生：
<select id="viewTasks" name="viewTasks" size=10 style="width: 100%;">
<option ondblclick="someFunction(1);">Task 1</option>
<option ondblclick="someFunction(2);">Task 2</option>
<option ondblclick="someFunction(3);">Task 3</option>
<option ondblclick="someFunction(4);">Task 4</option>
</select>
<script>
function someFunction(item) {
switch(item) {
case 1: ...
}
}
</scritp>
隨着你的選擇動態插入您甲腎上腺素編輯使用jQuery的.on方法。
$(function() {
$(document).on("dblclick", "#viewTasks", function(){
// DO YOUR STUFF HERE
});
});
Check out the MDN definition of the DOM event ondblclick here.
Here is a working example jsFiddle from referencing that definition.
的jQuery在這個例子只是用來運行的jsfiddle初始化時，你可以把它放在身體onLoad處理像他們表現出MDN參考頁面上。
基本上，您將獲得要處理雙擊事件的元素，並分配用戶定義的函數或發生該事件時運行的匿名函數。您並不一定需要jQuery，但它是處理DOM對象事件時jQuery如何讓您更輕鬆的完美例子。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
initElement();
});
function initElement()
{
var p = document.getElementById("foo");
// NOTE: showAlert(); or showAlert(param); will NOT work here.
// Must be a reference to a function name, not a function call.
p.ondblclick = showAlert;
};
function showAlert()
{
alert("ondblclick Event detected!")
}
});//]]>
</script>
</head>
<body>
<span id="foo">My Event Element</span>
<p>double-click on the above element.</p>
</body>
</html>
你可以使用jQuery？ – Soundz
@Soundz我想避免它，因爲我還不完全熟悉它。不過，我想看看你的解決方案:) –