當我用jQuery在畫布上右鍵單擊div時，如何激發事件

更新：我更新了代碼片段以包含在Firebug中找到的整個頁面。當我用jQuery在畫布上右鍵單擊div時，如何激發事件

我有以下代碼：

<html><head> 

<title>Welcome to CodeIgniter</title> 

<!--[if IE]> 
<script type="text/javascript" src="/assets/js/Jit/Extras/excanvas.js"></script> 
<![endif]--> 

<script src="/assets/js/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> 

<script src="/assets/js/Jit/jit.js" type="text/javascript"></script> 
<script src="/assets/js/tree.js" type="text/javascript"></script> 
<script src="/assets/js/jquery/jquery.rightClick.js" type="text/javascript"></script> 


<script type="text/javascript"> 

    $(document).ready(function() { 
     $(".node").rightClick(function() { 
      alert ("RIGHT CLICK"); 
     }); 

     $.getJSON("/ajax/fetch/tree", function(data) { 
      init(data); 
     }); 
    }); 

    $(".node").live("click", function() { 
     alert ($(this).attr("id")); 
    }); 


</script> 

<style type="text/css"> 
html, body { 
    width:100%; 
    height:100%; 
    background-color:#444; 
    text-align:center; 
    overflow:hidden; 
    font-size:9px; 
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; 
    margin:0;padding:0; 
} 
/* visualization style container */ 
#infovis { 
    background-color:#222; 
    position:relative; 
    width:900px; 
    height:500px; 
} 

a, a:link, a:visited { 
    color:#343439; 
} 
/* spacetree nodes CSS class */ 
.node { 
    background-color:transparent; 
    font-weight:bold; 
    overflow:hidden; 
    text-decoration:none; 
    position:absolute; 
    text-align:center; 
    padding:4px 1px 1px 1px; 
} 

.node:hover { 
    color:#393434; 
    } 

.hidden{ 
    display:none; 
} 
</style> 
</head><body> 

<div id="infovis"> 
    <div id="mycanvas" style="width: 900px; height: 500px; position: relative;"> 
     <canvas id="mycanvas-canvas" width="900" height="500" style="position: absolute; top: 0pt; left: 0pt; width: 900px; height: 500px;"></canvas> 
     <div id="mycanvas-label" style="overflow: visible; position: absolute; top: 0pt; left: 0pt; width: 900px; height: 0pt;"> 
      <div id="1" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 200px; top: 265px;">0.0</div> 
      <div id="4" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 215px;">2.0</div> 
      <div id="5" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 240px;">2.1</div> 
      <div id="9" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 265px;">2.2</div> 
      <div id="10" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 290px;">2.3</div> 
      <div id="2" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 310px; top: 253px;">1.0</div> 
      <div id="6" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 640px; top: 275px; display: none;">3.0</div> 
      <div id="3" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 310px; top: 278px;">1.1</div> 
      <div id="8" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 530px; top: 228px;">5.0</div> 
      <div id="11" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 530px; top: 253px;">5.1</div> 
     </div> 
    </div> 
</div> 
<div class="node">HELLO WORLD!</div> 
</body></html>

我希望能夠右鍵點擊的div之一的「節點」類，然後觸發一個事件。有沒有辦法做到這一點與jQuery？我查看了在http://www.javascripttoolbox.com/lib/contextmenu/上找到的上下文菜單jQuery插件。但是，如果我使用$（'node'）。contextMenu（...）它不起作用。如果我使用$（'infovis'）。contextMenu（...）上下文菜單起作用。

它看起來像這些div實際上是在畫布之外。我直接從Firebug中取出這段代碼。

來源

2010-06-24 Dan

試試這個：

$(document).ready(function(){ 
    $(document)[0].oncontextmenu = function() {return false;} 

    $("#infovis").delegate('.node','mousedown',function(e){ 
     if(e.button == 2) { 
     e.stopPropagation() 
     alert('Right mouse button!'); 
     return false; 
     } else { 
     return true; 
     } 

    }); 
});

我認爲#infovis是從一開始就看到你正在使用JavaScript來填充.node的div該專區。因此，你想使用事件委託，所以你不是綁定到每個節點，而是一個父節點。這使得你的代碼更快，即使你有1000個節點。另外，您不需要將綁定放在回調中。

我們委託mousedown並捕獲事件，如果按鈕== 2（右鍵單擊按鈕）。

您還可以通過停止contextmenu事件來禁用默認的右鍵單擊行爲。

讓我知道，如果這對你有用。

來源

2010-06-24 21:19:35 resopollution

您的推薦適合我。 – Dan 2010-06-24 21:37:41

你有沒有試過jquery.rightClick插件？似乎在快速測試我做的工作：

http://abeautifulsite.net/blog/2008/05/jquery-right-click-plugin/

$('.node').rightClick(function() { 

    console.log('right click'); 

});

看起來這是很老了，但隨後又沒有太多的代碼在那裏。我認爲它可能需要一點更新，但不是很多。

來源

2010-06-24 20:03:29 user113716

我嘗試這樣做的，但它沒有爲工作mycanvas-label div中的「node」div。我在頁面的底部放置了一個div，該頁面也具有類「節點」，右鍵點擊適用於該節點。 – Dan 2010-06-24 20:21:03

@Dan - 我用'rightClick'調用複製並粘貼了你的CSS，HTML和代碼，它適用於'.mycanvas-label'下的'.node'元素。測試Firefox，Safari，IE7和IE8。 – user113716 2010-06-24 20:43:17

@Dan - 通過調用''.getJSON（）'加載'.mycanvas-label'中的'.node'元素？如果是這樣，除非在'$ .getJSON（）'回調中調用'rightClick'，否則它將不起作用。 – user113716 2010-06-24 20:50:39

試試這個代碼：

$("#infovis").delegate('.node', 'mousedown', function(e) { 
    if (e.button == 2) { 
     e.stopPropagation() 
     console.log(e.target.id); 
     console.log(e.target.textContent); 
     return false; 
    } else { 
     return true; 
    } 

});`

e.target總回報包含class = "node"

e.taget.textcontext返回節點名的div是div元素

來源

2016-09-12 14:13:35 hossein

當我用jQuery在畫布上右鍵單擊div時，如何激發事件

回答

相關問題