`
lan13217
  • 浏览: 496280 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

使用 preventDefault() 函数来阻止对表单的提交。

 
阅读更多

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("form").submit(function(e){
    e.preventDefault();
    alert("Submit prevented");
  });
});
</script>
</head>
<body>
<form name="input" action="" method="get">
First name: 
<input type="text" name="FirstName" value="Mickey" size="20">
<br />Last name: 
<input type="text" name="LastName" value="Mouse" size="20">
<br />
<input type="submit" value="Submit">
</form> 
</body>
</html>
 

 

http://www.w3school.com.cn/htmldom/dom_obj_event.asp

 

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C 标准.

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性 此事件发生在何时... IE F O W3C
onabort 图像的加载被中断。 4 1 9 Yes
onblur 元素失去焦点。 3 1 9 Yes
onchange 域的内容被改变。 3 1 9 Yes
onclick 当用户点击某个对象时调用的事件句柄。 3 1 9 Yes
ondblclick 当用户双击某个对象时调用的事件句柄。 4 1 9 Yes
onerror 在加载文档或图像时发生错误。 4 1 9 Yes
onfocus 元素获得焦点。 3 1 9 Yes
onkeydown 某个键盘按键被按下。 3 1 No Yes
onkeypress 某个键盘按键被按下并松开。 3 1 9 Yes
onkeyup 某个键盘按键被松开。 3 1 9 Yes
onload 一张页面或一幅图像完成加载。 3 1 9 Yes
onmousedown 鼠标按钮被按下。 4 1 9 Yes
onmousemove 鼠标被移动。 3 1 9 Yes
onmouseout 鼠标从某元素移开。 4 1 9 Yes
onmouseover 鼠标移到某元素之上。 3 1 9 Yes
onmouseup 鼠标按键被松开。 4 1 9 Yes
onreset 重置按钮被点击。 4 1 9 Yes
onresize 窗口或框架被重新调整大小。 4 1 9 Yes
onselect 文本被选中。 3 1 9 Yes
onsubmit 确认按钮被点击。 3 1 9 Yes
onunload 用户退出页面。 3 1 9 Yes

鼠标 / 键盘属性

属性 描述 IE F O W3C
altKey 返回当事件被触发时，"ALT" 是否被按下。 6 1 9 Yes
button 返回当事件被触发时，哪个鼠标按钮被点击。 6 1 9 Yes
clientX 返回当事件被触发时，鼠标指针的水平坐标。 6 1 9 Yes
clientY 返回当事件被触发时，鼠标指针的垂直坐标。 6 1 9 Yes
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。 6 1 9 Yes
metaKey 返回当事件被触发时，"meta" 键是否被按下。 No 1 9 Yes
relatedTarget 返回与事件的目标节点相关的节点。 No 1 9 Yes
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。 6 1 9 Yes
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。 6 1 9 Yes
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。 6 1 9 Yes

IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：

属性 描述
cancelBubble 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性 描述 IE F O W3C
bubbles 返回布尔值，指示事件是否是起泡事件类型。 No 1 9 Yes
cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。 No 1 9 Yes
currentTarget 返回其事件监听器触发该事件的元素。 No 1 9 Yes
eventPhase 返回事件传播的当前阶段。 Yes
target 返回触发此事件的元素（事件的目标节点）。 No 1 9 Yes
timeStamp 返回事件生成的日期和时间。 No 1 9 Yes
type 返回当前 Event 对象表示的事件的名称。 6 1 9 Yes

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

方法 描述 IE F O W3C
initEvent() 初始化新创建的 Event 对象的属性。 No 1 9 Yes
preventDefault() 通知浏览器不要执行与事件关联的默认动作。 No 1 9 Yes
stopPropagation() 不再派发事件。 No 1 9 Yes
分享到：
| 如何开启浏览器的WebGL功能？
评论
1 楼 沉醉音乐的咖啡 2015-11-20  
   
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Js 表单提交验证函数（很全了）

    2. `addEventListener`：监听`submit`事件，阻止默认的表单提交，通过自定义函数验证数据。 ```javascript document.getElementById('myForm').addEventListener('submit', function(e) { e.preventDefault(); // ...

    常用的表单提交判断函数

    - 在表单提交时触发验证，可以使用`addEventListener('submit', function(event) {...})`，在事件处理器中执行验证逻辑，如果验证失败，阻止表单的默认提交行为：`event.preventDefault()`。 6. **错误提示** - ...

    利用JavaScript阻止表单提交的两种方法

    首先，我们来看如何使用return false来阻止表单提交。在JavaScript中，表单提交是通过点击提交按钮触发的，这是一个典型的事件处理过程。当用户点击提交按钮时，会触发一个事件，这个事件会调用一个函数。在这个函数...

    JavaScript阻止表单提交方法（附代码）

    这种方法通过在事件处理函数中使用`event.preventDefault()`来阻止表单的默认提交行为。例如，在HTML中，你可以为表单的`&lt;form&gt;`元素添加一个`onsubmit`属性，绑定一个JavaScript函数： ```html (event)"&gt; &lt;p&gt;name...

    简单的表单提交代码

    例如，可以使用`event.preventDefault()`阻止表单的默认提交，然后通过Ajax异步提交数据。 4. **CSS样式设计** css文件用于美化表单界面，包括布局、颜色、字体等。可以使用CSS选择器来定位表单元素，如`.form-...

    javascript方式防止表单重复提交

    5. **使用sessionStorage或localStorage**：存储用户已提交的状态，当检测到表单已经提交过，就阻止再次提交。例如： ```javascript if (sessionStorage.getItem('formSubmitted') !== 'true') { sessionStorage....

    Ajax使用jQuery提交表单 文件

    在上面的代码中，我们首先阻止了表单的默认提交行为，然后使用`serialize()`方法获取表单数据。接着，我们通过`$.ajax()`发送POST请求，其中`url`是服务器处理表单的接口地址，`data`是提交的数据，`dataType`指定...

    js实现定时提交表单

    // 或者，阻止表单的默认提交事件（需要在表单的submit事件处理函数中） document.getElementById('yourFormId').addEventListener('submit', function(event) { event.preventDefault(); // 阻止提交 }); ``` ...

    使用AJAX提交Form表单实例演示

    在这个示例中，我们阻止了表单的默认提交行为，然后使用`serialize()`方法获取表单数据。接着，我们使用`$.ajax()`函数发起异步请求。在`success`回调中，我们处理服务器返回的成功或错误信息。如果服务器返回JSON...

    表单点击提交按钮后变成灰色.rar

    2. 阻止默认行为：在处理函数中，可以使用`event.preventDefault()`阻止表单的默认提交行为，这在进行前端验证或异步提交时非常有用。 三、按钮状态控制 1. `disabled`属性：设置或获取一个元素是否被禁用。将按钮...

    使用jQuery ajax提交表单代码

    本文将深入探讨如何使用jQuery的ajax方法来提交表单，从而实现异步数据交换，提高用户体验。 首先，jQuery的$.ajax()函数是进行Ajax请求的核心，它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...

    说说回车键触发表单提交的问题

    - **使用`&lt;form onsubmit=""&gt;`**：在`&lt;form&gt;`标签上添加`onsubmit`事件处理函数，可以控制表单提交前后的逻辑。 此外，对于`&lt;textarea&gt;`元素，按下回车键会插入换行符，而非触发表单提交。如果希望在此场景下也响应...

    jquery实现弹窗表单填写提交

    表单填写完成后，提交表单通常是通过JavaScript阻止默认的表单提交行为，然后使用Ajax发送表单数据到服务器。这里涉及的jQuery知识点包括`event.preventDefault()`防止页面刷新，以及`$.ajax()`进行异步请求： ```...

    jquery异步提交form表单

    在上述代码中，`event.preventDefault()`用于阻止表单的默认提交行为。然后，`.ajaxSubmit()`方法被用来设置异步提交的参数，包括提交的URL、类型、预期的响应数据类型，以及成功和错误的回调函数。 jQuery Form ...

    js提交表单的三种方式

    // 阻止默认的表单提交行为 $.ajax({ url: $(this).attr('action'), type: $(this).attr('method'), data: $(this).serialize(), success: function(response) { // 处理返回的数据 }, error: function(xhr...

    利用ajax提交表单完整流程

    为了让AJAX提交生效，我们需要阻止表单的默认提交行为。这通常在表单的`submit`事件处理器中完成： ```javascript document.getElementById('myForm').addEventListener('submit', function(event) { event....

    JS用户反馈表单提交代码.rar

    在JS中，我们可以通过监听`submit`事件来捕获表单的提交行为，并对其进行自定义处理。例如，阻止默认的提交行为，使用AJAX异步提交表单数据，这样可以实现无刷新页面的交互体验。以下是一个简单的例子： ```...

    ajax方式提交表单，全局提交

    AJAX表单提交的核心在于使用JavaScript库，比如jQuery，来处理表单的提交事件。在提供的文件列表中，`jquery.form.js`是一个常用的jQuery插件，它扩展了jQuery的功能，使得我们可以轻松地实现AJAX表单提交。另一个...

    form表单的异步回调方法

    2. **阻止默认行为（Preventing Default Behavior）**：为了阻止表单提交导致的页面刷新，可以监听表单的`submit`事件，并在事件处理函数中调用`event.preventDefault()`。这样，表单数据会被收集，但不会进行实际的...

    表单提交代码

    JavaScript可以用来处理表单提交前的验证、阻止默认的表单提交行为、异步提交（AJAX）等。例如，使用`addEventListener`监听提交事件，然后在提交前进行验证： ```javascript document.querySelector('form')....

Magicbox
Global site tag (gtag.js) - Google Analytics