How do you tell if caps lock is on using JavaScript?
function isCapslock(e){
e =(e)? e : window.event;var charCode =false;if(e.which){
charCode = e.which;}elseif(e.keyCode){
charCode = e.keyCode;}var shifton =false;if(e.shiftKey){
shifton = e.shiftKey;}elseif(e.modifiers){
shifton =!!(e.modifiers &4);}if(charCode >=97&& charCode <=122&& shifton){returntrue;}if(charCode >=65&& charCode <=90&&!shifton){returntrue;}returnfalse;}
It's kind of hard to tell what you're asking, but if you want to hook into the "context menu" event of a browser, you hook the contextmenu
event and then do whatever you're going to do (which could include creating a div
, for instance, with options on it — e.g., your own context menu). You can either do that on the lists themselves, individually, via getElementById
as you indicated in your question, or you can do it by hooking the event on some container that holds all of the lists, and then figuring out when the event is triggered which list it was triggered on ("event delegation").
See the end of this answer for the event delegation approach. But assuming you have a way of knowing the actual IDs used and you want to hook each list specifically for some reason:
HTML:
<ulid='list_1'><li>List 1 item 1</li><li>List 1 item 2</li></ul><ulid='list_2'><li>List 2 item 1</li><li>List 2 item 2</li></ul>
JavaScript:
hookEvent(document.getElementById('list_1'),'contextmenu',function(event){event=event|| window.event;if(event.preventDefault){event.preventDefault();}
display("List 1 context menu");returnfalse;});
hookEvent(document.getElementById('list_2'),'contextmenu',function(event){event=event|| window.event;if(event.preventDefault){event.preventDefault();}
display("List 2 context menu");returnfalse;});function hookEvent(element,event, handler){if(element.addEventListener){
element.addEventListener(event, handler,false);}elseif(element.attachEvent){
element.attachEvent('on'+event, handler);}else{
element['on'+event]= handler;}}
Note that only some (most) browsers let you cancel the default context menu.
Update: Re your "but what if the ID is bindable?" question below: I'm afraid I don't know what you mean by "bindable" — none of the tags on your question indicates a specific templating technology. You haven't even mentioned whether the templating is happening server-side or client-side, which makes it hard to help. But basically, by the time the JavaScript is running, there will be real IDs on real elements in the document. You'll have to know what those IDs are in order to use getElementById
.
Server-side templating:
If those IDs are going to be completely dynamic and the template is being handled on the server, you can include a small bit of script that passes those IDs on to JavaScript. For instance, near the top of your document you might have:
<scripttype='text/javascript'>var mySpecialListIDs =[];</script>
...and then update your template to add a small script
tag each time it's expanded:
<ulid="list_{id}"class="list"><liid="Item_{id}"><aondblclick=""><span>{title}</span></a></li></ul><scripttype='text/javascript'>
mySpecialListIDs.push("{id}");</script>
Then your client-side code can loop through mySpecialLitIDs
and use each ID when hooking up the handler.
Client-side templating:
If the templating is being done client-side, this gets a bit simpler: Just set up your mySpecialListIDs
list at some convenient place in your client-side script, and the append to it each time you call the templating engine.
Event Delegation: Whether you're doing server- or client-side templating, if you're going to have dynamic lists like this, sometimes event delegation is the best way to handle it. The contextmenu
event (like most, but not all, events) bubbles up the DOM. So if you hook it on an ancestor element (something that contains all of your lists, like the document body itself or some such), you can then see which actual list was clicked by examining the event object. Like this:
HTML:
<divid='list_container'><ulid='list_1'><li>List 1 item 1</li><li>List 1 item 2</li></ul><ulid='list_2'><li>List 2 item 1</li><li>List 2 item 2</li></ul></div>
JavaScript (using the hookEvent
function from above):
// Hook up the contextmenu event on the container, not// on each list:
hookEvent(document.getElementById('list_container'),'contextmenu',
handleListContextMenu);// Our handler functionfunction handleListContextMenu(event){var target;// Handle IE-vs-the-world differenceevent=event|| window.event;// Find out what the actual target element clicked was
target =event.target ||event.srcElement;// See if it or an ancestor of it is one of our listswhile(target &&(target.tagName !=="UL"||!target.id || target.id.substring(0,5)!=="list_")){
target = target.parentNode;}// Did we find a list?if(target){// Yes, handle this.if(event.preventDefault){event.preventDefault();}
display("List '"+ target.id +"' context menu");returnfalse;}}
相关推荐
兼容FF和IE Js右键菜单,js菜单,漂亮的Js右键导航,好用的Js右键菜单
js自定义右键菜单
通过JS来设置鼠标的右键..使鼠标右键能有自己想要的功能..
js(javascript)右键菜单实现,js(javascript)右键菜单实现,js(javascript)右键菜单实现
js实现右键菜单效果,测试可用(源代码)
HTNL+javaScript右键菜单,HTNL+javaScript右键菜单,HTNL+javaScript右键菜单
js自定义右键菜单是一款在网页中右击鼠标,弹窗类似windows桌面上鼠标右击效果,空白处点击右键会有相应的内容弹出。 js自定义右键菜单效果图一: 点击查看演示 js自定义右键菜单效果图二:
该文件是一个实现比较好的鼠标右键菜单。 实现方案为JavaScript。值得学习
IE下JS模拟鼠标右键菜单:查看、新增、编辑、删除、刷新、后退、关闭等。可根据自己的需要进行添加修改
echarts 右键菜单实例,不修改源码
网页上鼠标右键显示自定义菜单功能
javascript仿window xp鼠标右键菜单功能
javascript实现右键菜单,兼容IE,火狐
此JS是著名的二手车网站www.che2.com后台CMS的特效,整理出来由大家共享使用。
这是一款非常实用的js全屏右键菜单插件。该右键菜单插件可以在页面的任何地方按右键弹出上下文菜单,而且可以制作为多级菜单。它由纯js制作,简单实用。
右键菜单插件context.js
js右键菜单,测试通过IE,火狐,Google,菜单项由js动态添加,在菜单项中可添加图标,文本,菜单项点击事件,以及分隔线
javascript 右键菜单,比较好用,自定义的,可以根据需要自己改动
JS+CSS网页右键菜单
这次我们要分享的也是一款JavaScript右键菜单插件,它的外观是基于Bootstrap的,因此UI比之前那款要漂亮许多,另外这款右键菜单插件也支持自定义区域菜单显示功能,你可以在初始化的时候指定需要弹出菜单的网页区域...