The Mouse
| We saw the available mouse events, such as the available keyboard events, in Chapter 6, including which browser supports which events. (For example, the onmousewheel event is currently supported only by Internet Explorer 6.0.) Here's an overview of these events:
Let's take a look at an example. Connecting the mouse to your code isn't all that hard; in this case, we'll connect the mouse-down event to the document object with the code document.onmousedown = mouseDownHandler . You can connect event handlers for this event to other elements as well, of course; for example, you can use the ONMOUSEDOWN attribute of a button element like this: <INPUT TYPE="BUTTON" ONMOUSEDOWN="mouseDownHandler()">. Tip Although I'll take a look at the mouse-down event here, the event object properties you use are virtually the same in the mouse up and mouse move events. The difficulty comes in the detailseach of the three major event models works differently with the mouse. I'll try to include all possibilities in this example to make how this works clear, including using the Shift, Ctrl, and Alt keys with the left and right mouse buttons . In the NS4 model, for example, you use the event object's which property to determine which mouse button was pressed, and the modifiers property to determine which of the Shift, Ctrl, and Alt keys were pressed, if any. In the NS6 and IE4+ event object models, you use the button property to determine which mouse button was pressed, and the shiftKey , altKey , and ctrlKey properties to check which modifier keys were also pressedbut the button property holds different values for the mouse buttons in each browser. Determining where the mouse was actually pressed is also different. Note For coverage of all these properties, see the discussion of the three event objects at the end of this chapter. As you can see, it's pretty chaotic . As discussed in Chapter 6, however, the W3C has been bringing some sanity to this picture by introducing its own event object, and that object is the one that the NS6 event model tries to implement, as we'll see later in this chapter. Meanwhile, however, we're stuck with three different event models, and we have to handle them all. Here's the code for this example, which indicates which mouse button was pressed (left or right), which modifier keys were pressed (Shift, Ctrl, or Alt), and where the mouse button was pressed in the page: (Listing 15-01.html on the web site) <HTML> <HEAD> <TITLE>Working with the mouse</TITLE> </HEAD> <BODY> <H1>Working with the mouse</H1> <FORM name="form1"> <H2>Press a mouse button and Shift, Ctrl, or Alt</H2> <BR> <INPUT TYPE="text" NAME="text1" SIZE = 60> </FORM> <SCRIPT LANGUAGE= "JavaScript"> <!-- document.onmousedown = mouseDownHandler document.oncontextmenu = noclick function noclick() { return false } function mouseDownHandler(e) { var x, y, button if(navigator.appName == "Netscape" && parseInt(navigator.appVersion) == 4) { switch(e.which){ case 1: button = "left" break case 3: button = "right" break } switch(e.modifiers){ case 0: document.form1.text1.value = button + " mouse button down at: " + e.pageX + ", " + e.pageY break case 1: document.form1.text1.value = "Alt key and " + button + " mouse button down at: " + e.pageX + ", " + e.pageY break case 2: document.form1.text1.value = "Ctrl key and " + button + " mouse button down at: " + e.pageX + ", " + e.pageY break case 4: document.form1.text1.value = "Shift key and " + button + " mouse button down at: " + e.pageX + ", " + e.pageY break case 6: document.form1.text1.value = document.form1.text1.value = "Shift and Ctrl keys and " + button + " mouse button down at: " + e.pageX + ", " + e.pageY break } } else { if(!e){ e = window.event } x = e.clientX y = e.clientY if(navigator.appName == "Netscape" && parseInt(navigator.appVersion) > 4) { switch(e.button){ case 0: button = "left" break case 2: button = "right" break } } if (navigator.appName == "Microsoft Internet Explorer") { switch(e.button){ case 1: button = "left" break case 2: button = "right" break } } if(e.shiftKey && e.ctrlKey){ document.form1.text1.value = "Shift and Ctrl keys and " + button + " mouse button down at: " + x + ", " + y return } if(e.shiftKey){ document.form1.text1.value = "Shift key and " + button + " mouse button down at: " + x + ", " + y return } if(e.ctrlKey){ document.form1.text1.value = "Ctrl key and " + button + " mouse button down at: " + x + ", " + y return } if(e.altKey){ document.form1.text1.value = "Alt key and " + button + " mouse button down at: " + x + ", " + y return } document.form1.text1.value = button + " mouse button down at: " + x + ", " + y } } //--> </SCRIPT> </BODY> </HTML> Yes, this is a large amount of code just to handle mouse clicks; the issue, of course, is detecting which event object you're using and providing code for them all. You can see the results of this code in Figure 15.1 in the Netscape Navigator and in Figure 15.2 in the Internet Explorer. Figure 15.1. Using the mouse in the Netscape Navigator. Figure 15.2. Using the mouse in the Internet Explorer. My hope in introducing this example is that you can adapt it as needed for your own mouse handlingthere's nothing like some working code to get you started on a project. Here's another popular use for mouse handling: disabling right-clicks. The idea here is that the user can't right-click your page to download images using the popup context menu that the browser normally displays. There's a lot of this code already around for the NS4 and IE4+ event models, but I haven't seen any for the NS6 model, which seems to have programmers stymied; even if you handle the mouse-down and mouse-up events, returning false from the event handler to stop further processing of the event, the context menu still appears in NS6. (It didn't in NS4.) To get rid of that menu, you must handle the oncontextmenu event in Netscape Navigator 6.0. This code does that, and will work for all three event models, disabling right mouse clicks and displaying an alert box with an error message if the user does right-click the mouse: (Listing 15-02.html on the web site) <HTML> <HEAD> <TITLE>Disabling Right Clicks</TITLE> </HEAD> <BODY> <H1>Disabling Right Clicks</H1> <IMG ID="img1" SRC="image1.jpg"> <SCRIPT LANGUAGE= "JavaScript"> <!-- document.oncontextmenu=noclick document.onmousedown = mouseDownHandler if(navigator.appName == "Netscape" && parseInt(navigator.appVersion) == 4) { document.captureEvents(Event.MOUSEDOWN) } function noclick() { return false } function mouseDownHandler(e) { if (navigator.appName == "Netscape"){ if (parseInt(navigator.appVersion) == 4 && e.which == 3) { alert("Sorry, right clicking is disabled.") return false } if (parseInt(navigator.appVersion) > 4 && e.button == 2) { alert("Sorry, right clicking is disabled.") return false } } if (navigator.appName == "Microsoft Internet Explorer") { if (event.button == 2){ alert("Sorry, right clicking is disabled.") return false } } } //--> </SCRIPT> </BODY> </HTML> Once again, the difficulty in this code is in the details; we have to handle all three event models here. You can see the results of this code in Figure 15.3 in the Netscape Navigator 6.0. Figure 15.3. Disabling right-clicks in the Netscape Navigator 6.0. Tip Before you rely on this code, there are some things you should know: There's no guarantee it will work with future browsers, of course. In addition, note that it cannot really prevent users from saving your images; users can just turn off scripting, or, because they have the URLs of your images, they can download them directly. I created this example mostly because it's a widespread use of JavaScript, but it's not really a secure technique for protecting your images.  |
- Enterprise Application Integration: New Solutions for a Solved Problem or a Challenging Research Field?
- The Effects of an Enterprise Resource Planning System (ERP) Implementation on Job Characteristics – A Study using the Hackman and Oldham Job Characteristics Model
- Distributed Data Warehouse for Geo-spatial Services
- Data Mining for Business Process Reengineering
- Intrinsic and Contextual Data Quality: The Effect of Media and Personal Involvement