Question

我有一个简单的选择菜单，其中包含一些列表项，这些列表项在加载页面时会动态插入。

<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>

我想在任何单个列表项上双击时向用户显示特定页面。我想要显示的页面将根据列表项字符串中的数据显示。

我该怎么做呢？

Answer 1

$(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
        }
    });
});

Answer 2

$('#viewTasks option').dblclick(function() {
 //do something
});

或raw：

<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>

Answer 3

这是一个做你想要的小提琴（纯粹的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();

Answer 4

使用jQuery的.dblclick()事件：

$('#viewTasks').dblclick(function() {
  alert('The item was double-clicked!');
});

小提琴：http://jsfiddle.net/2cDv7/

Answer 5

由于您的选项是动态插入的，因此您需要使用jQuery的.on方法。

  $(function() {
    $(document).on("dblclick", "#viewTasks", function(){
       // DO YOUR STUFF HERE
    });  
  });

Answer 6

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>

双击列表项打开页面

6 个答案: