Inside JavaScript

2017-07-07 02:10:07

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:

onmousedown . Occurs when the primary mouse button mouse is pressed.

onmouseenter . Occurs when the mouse enters an object. This event was new in Internet Explorer 5.5 and is an alternative to onmouseover .

onmouseleave . Occurs when the mouse leaves an object. This event was new in Internet Explorer 5.5 and is an alternative to onmouseout .

onmousemove . Occurs when the mouse moves.

onmouseout . Occurs when the mouse leaves an object (just like onmouseleave ).

onmouseover . Occurs when the mouse enters an object (just like onmouseenter ).

onmouseup . Occurs when the primary mouse button is released.

onmousewheel . Occurs when the mouse wheel button is rotated .

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">  </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">  </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.

(Listing 15-01.html on the web site)

Figure 15.1. Using the mouse in the Netscape Navigator.

Figure 15.2. Using the mouse in the Internet Explorer.

(Listing 15-02.html on the web site)

Figure 15.3. Disabling right-clicks in the Netscape Navigator 6.0.

Категории