实例说明为什么不要行内使用javascript

很多人都曾经这么使用Javascript


代码如下:

<a href="#" onclick="al()">保存</a>

上面的代码，很方便使用，所有浏览器都支持

虽然我很早就看过一些书，说html，css，js分开来，比较容易维护，但是我贪图方面，还是经常这么写，不过我今天用火狐调试的时候发现，还是不要行内写了，因为这样很不安全，因为用火狐的firebug可以轻松让代码失效！

下面看一下为什么：


代码如下:

<html>
<head>
<script>
function al()
{
alert("good");
}
</script>
</head>
<body>
<a href="#" onclick="al()">保存</a>
</body>
</html>

上面的代码是点击标签弹出对话框

效果如图：

但是如果我在火狐里面找到a标签并把里面的js代码去掉的话，在单击a标签就不会弹出对话框了，如下图

所以假如你这个单击事件是判断用户输入数据是否合法的话，那么就无法判断了

本人是做asp.net的，今天就发现这个问题，因为asp.net服务器控件，有两个单击事件，一个前台一个后台的，我用前台的单击事件判断用户的输入数据，合法的话调用后台事件，结果用火狐调试，就发现了上面介绍的现象，即使数据不合法也直接调用后台方法了，也许我这个不是什么技术，不过我为自己发现这个问题而高兴，特此发文章分享一下，哈哈

解决方法：

给a标签个id ，如下面就可以了


代码如下:

<a id="a1" href="#">保存</a>
<script>
document.getElementById("a1").onclick=function(){}
</script>

赞 (0)

相关推荐

  • 实例说明为什么不要行内使用javascript

    实例说明为什么不要行内使用javascript

    很多人都曾经这么使用Javascript 复制代码 代码如下: <a href="#" onclick="al()">保存</a> 上面的代码,很方便使用,所有浏览器都支持 虽然我很早就看过一些书,说html,css,js分开来,比较容易维护,但是我贪图方面,还是经常这么写,不过我今天用火狐调试的时候发现,还是不要行内写了,因为这样很不安全,因为用火狐的firebug可以轻松让代码失效! 下面看一下为什么: 复制代码 代码如下: <ht

  • Easyui使用Dialog行内按钮布局的实例

    Easyui使用Dialog行内按钮布局的实例

    JSP页面 <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',split:false" > <div title="角色分配" > <table cellpadding="12" cellspacing="0" > &l

  • javascript动态添加样式(行内式/嵌入式/外链式等规则)

    添加CSS的方式有行内式.嵌入式.外链式.导入式 a)动态引入样式表文件: 复制代码 代码如下: function loadLink(url){ var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; var head = document.getElmentsByTagName(&qu

  • Vue中通过属性绑定为元素绑定style行内样式的实例代码

    1.直接在元素上通过:style的形式,书写样式对象 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 <h

  • 关于js的三种使用方式（行内js、内部js、外部js）的程序代码

    本文讲述了js的三种使用方式(行内js.内部js.外部js)的实例代码,感兴趣的小伙伴们可以参考一下,具体如下: 1.行内js:js不单独写出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js使用方式1:行内js</title> </head> <body> <input

  • JS表格组件BootstrapTable行内编辑解决方案x-editable

    JS表格组件BootstrapTable行内编辑解决方案x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的朋友可以移步JS组件系列--表格组件神器:bootstrap table. 一.x-editable组件介绍 x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap.Jquery U

  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    最近做的一个项目是基于 vue + AntDesign 的.由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单.在线演示地址及最终效果图如下: 在线演示地址>> 首先新建一个Table组件的实例: <a-table :columns="columns" :rowKey="record => { return record.INDEX;}" :dataSource="tableData" /> ... c

  • Repeater事件OnItemCommand取得行内控件的方法

    记录一下,主要是这句:TextBox txtNum = e.Item.FindControl("txtNum") as TextBox; Repeater真是太强了,太灵活.除了Repeater别的都不用. 复制代码 代码如下: <table>    <asp:Repeater ID="rptList" runat="server"OnItemCommand="rptList_ItemCommand">

  • jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】

    jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】

    前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据,同时对行内数据上移下移,所以对这几个功能做个总结. 1.首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添加列的editor属性, 行内编辑主要使用beginEdit(), endEdit(),同时一个关键就是拿到当前的操作行索引editIndex. 2.撤销用到了rejectChanges(). 3.保存时使用getRows()或者getChanges(). getChanges()主要是获取添加或编辑的数

  • EasyUI中的dataGrid的行内编辑

    这个js代码是别人写的,可能不是最好的,但我个人觉得首先能帮助别人解决功能问题的话就特别好.我稍加修改后用在了自己的项目上了,这里贴出来分享一下.后台用的TinkPHP因为都是查增删改比较简单,这里就不贴了.前台效果图因为比较懒,也不贴了. $(function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量:当前编辑的行 datagrid = TskupluAddPacket.datagrid({ ur

随机推荐