onClick

JavaScript

previous page next page

JavaScript语言参考手册技术交流：迷途知返 pwwang.com

JavaScript手册

【目录】【上一页】【下一页】【索引】

onClick

Executes JavaScript code when a click event occurs; that is, when an object on a form is clicked. (A Click event is a combination of the MouseDown and MouseUp events).

事件适用对象	Button, document, Checkbox, Link, Radio, Reset, Submit
实现版本	Navigator 2.0 Navigator 3.0: 添加了 the ability to return false to cancel the action associated with a click event

语法

onClick="handlerText"

参数

JavaScript 代码或对一个 JavaScript 函数的调用。

使用的事件属性

type	标明了事件的类型。
target	标明了事件原来发送的对象。
When a link is clicked, layerX, layerY, pageX, pageY, screenX, screenY	Represent the cursor location at the time the event occurred.
which	Represents 1 for a left-mouse click and 3 for a right-mouse click.
modifiers	Contains the list of modifier keys held down when the event occurred.

描述

For checkboxes, links, radio buttons, reset buttons, and submit buttons, onClick can return false to cancel the action normally associated with a click event.

For example, the following code creates a link that, when clicked, displays a confirm dialog box. If the user clicks the link and then chooses cancel, the page specified by the link is not loaded.

<A HREF = "http://home.netscape.com/"
onClick="return confirm('Load Netscape home page?')">
Netscape</A> If the event handler returns false, the default action of the object is canceled as follows:

Buttons--no default action; nothing is canceled

Radio buttons and checkboxes--nothing is set

Submit buttons--form is not submitted

Reset buttons--form is not reset

Note In Navigator 3.0, on some platforms, returning false in an onClick事件适用对象a reset button has no effect.

示例

示例 1: Call a function when a user clicks a button. Suppose you have created a JavaScript function called compute. You can execute the compute function when the user clicks a button by calling the function in the onClick event handler, as follows:

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)"> In the preceding example, the keyword this refers to the current object; in this case, the Calculate button. The construct this.form refers to the form containing the button.

For another example, suppose you have created a JavaScript function called pickRandomURL that lets you select a URL at random. You can use onClick to specify a value for the HREF attribute of the A tag dynamically, as shown in the following example:

<A HREF=""
onClick="this.href=pickRandomURL()"
onMouseOver="window.status='Pick a random URL'; return true">
Go!</A> In the above example, onMouseOver specifies a custom message for the browser's status bar when the user places the mouse pointer over the Go! anchor. As this example shows, you must return true to set the window.status property in the onMouseOver event handler.

示例 2: Cancel the checking of a checkbox. The following example creates a checkbox with onClick. The event handler displays a confirm that warns the user that checking the checkbox purges all files. If the user chooses Cancel, onClick returns false and the checkbox is not checked.

<INPUT TYPE="checkbox" NAME="check1" VALUE="check1"
onClick="return confirm('This purges all your files. Are you sure?')"> Remove files

参看

要获得关于事件句柄的常规信息，请看 “事件的常规信息”。

要获得关于事件对象的信息，请看事件。

【目录】【上一页】【下一页】【索引】

返回页面顶部

previous page start next page