onclick="f1()"和onclick="return f1()"的区别是什么?

原文链接:http://zhidao.baidu.com/question/126351894.html

是有区别的,具体请看如下解释。
浏览器会对页面元素的某些操作产生默认行为,比如说你有个链接:
<a href="http://zhidao.baidu.com">百度知道</a>
当你点击它的时候,浏览器就会跳转到百度知道的页面,实际上这是浏览器对a元素的点击操作(即onclick)产生的默认事件处理。
假如我们希望当点击这个链接时弹出一个对话框,可以这样做:
function f1(){
  alert("你点了我");
}
<a href="http://zhidao.baidu.com" οnclick="f1()">百度知道</a>
我们发现会弹出一个对话框,但是页面还是跳到了百度知道,如果我们不希望浏览器自动跳到百度知道该怎么做呢?
首先在f1函数中加入一句话:
function f1(){
  alert("你点了我");
  return false;
}
接着在onclick中这样写:
<a href="http://zhidao.baidu.com" οnclick="return f1()">百度知道</a>
因为f1()的返回值是false,所以onclick所对应的函数的返回值也是false。现在我们发现点击这个链接只会弹出对话框,而不会跳到百度知道,这里就是把浏览器的默认行为取消了。
如果f1()函数没有return false,也可以直接把return false加在onclick中,比如:οnclick="f1();return false"。
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%-- Created by IntelliJ IDEA. User: Administrator Date: 2025/2/28 Time: 15:47 To change this template use File | Settings | File Templates. --%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>学生列表</title> </head> <body> <h2 style="text-align: center">欢迎您,${name}</h2> <form action="<%=request.getContextPath()%>/student/selectStudentAndGrade" method="post"> 学生姓名:<input type="text" name="studentName" placeholder="请输入要搜索的学生姓名" value="${student.studentName}"> 班级:<select name="gradeId"> <option value=>请输入班级</option> <option value="1"<c:if test="${student.gradeId=='1'}">selected</c:if>>java1班</option> <option value="2"<c:if test="${student.gradeId=='2'}">selected</c:if>>java2班</option> <option value="3"<c:if test="${student.gradeId=='3'}">selected</c:if>>java3班</option> <option value="4"<c:if test="${student.gradeId=='4'}">selected</c:if>>java4班</option> </select> <input type="submit" value="查询"> <input type="button" value="重置" onclick="resetQuery()"> </form> </form> <input type="button" value="新增" onclick="location.href='<%=request.getContextPath()%>/studentAdd.jsp'"> <table> <tr> <td>序号</td> <td>学生姓名</td> <td>年龄</td> <td>出生日期</td> <td>班级</td> </tr> <c:forEach items="${studentList}" var="tea" varStatus="sta"> <tr> <td>${sta.count}</td> <td>${tea.studentName}</td> <td>${tea.age}</td> <%-- <td>${stu.birth}</td>--%> <td><fmt:formatDate value="${tea.birth}" pattern="yyyy-MM-dd"/></td> <td>${tea.grade.gradeName}</td> <%-- <td>${stu.grade.gradeName}</td>--%> <td><a href="<%=request.getContextPath()%>/student/getStudentInfo/${tea.id}">修改</a> <a href="<%=request.getContextPath()%>/student/deleteStudent/${tea.id}" onclick="if (confirm('确认是否删除')==false) {return false;}">删除</a></td> </tr> </c:forEach> </table> </body> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script> <script> function resetQuery(){ $("input[type=text]").val(""); $('select').prop('selectedIndex',0); } </script> </html>css样式
最新发布
06-13
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值