javascript - Open page on double clicking a list item

Question

I have a simple select menu with some list items which are dynamically inserted when the page is loaded.

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

I would like to show the user a specific page whenever he/she double-clicks on any single list item. The page I want to show will be displayed according to the data in the list item string.

How should I go about doing this?

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

here is a fiddle that does what you want (pure 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();

score 0 · Accepted Answer

Use jQuery's .dblclick() event:

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

Fiddle: http://jsfiddle.net/2cDv7/

score 0 · Accepted Answer

As your options are dynamically inserted you need to use jQuery's .on method.

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

score 0 · Accepted Answer

Check out the MDN definition of the DOM event ondblclick here.

Here is a working example jsFiddle from referencing that definition.

jQuery was only used in this example to run the initialization event in jsFiddle, you could put it in the body onLoad handler like they show on the MDN reference page.

Basically, you get the element that you want to handle the double click event for, and assign either a user-defined function, or an anonymous function to run when that event occurs. You do not absolutely need jQuery for this, but it is a perfect example of how jQuery can make things easier for you when it comes to handling events from DOM objects.

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

javascript - Open page on double clicking a list item

6 回答 6

Related

Reference