onmousemove和onmouseout事件的调用,和js使用双引号、单引号的时候应该注意的问题
使用js的时候,统一使用双引号,然后通过反斜杠进行转义
①如果同时使用单引号、和双引号的情况下容易出现问题,导致标签中表示的事件不能调用,
②导致由于标签没有封口而出现样式布局错误
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS教程:鼠标悬停时显示文字或显示图片</title>
<script type="text/javascript">
function showPic(sUrl) {
alert(sUrl);
var x, y;
x = event.clientX;
y = event.clientY;
document.getElementById("Layer1").style.left = (x - 60).toString() + "px";
document.getElementById("Layer1").style.top = (y - 100).toString() + "px";
document.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\">";
document.getElementById("Layer1").style.display = "block";
}
function hiddenPic() {
document.getElementById("Layer1").innerHTML = "";
document.getElementById("Layer1").style.display = "none";
}
</script>
</head>
<body>
<div style="position: relative">
<div id="Layer1" style="display: none; position: absolute; z-index: 1;"></div>
</div>
<img src="pic/QQ截图20150721092858.jpg" onmouseout="hiddenPic()" onmousemove="showPic(this.src)" title="wowowowo" style="margin-top: 300px" />
<div onmouseout="hiddenPic()" onmousemove="showPic('pic/QQ截图20150721092858.jpg')" style="margin-top: 300px; width: 200px; height: 100px; background-color: blue" />
</body>
</html>
对于上述代码,如果ShowPic中的内容,没有使用单引号括起来的情况下,那么将会导致无法调用showPic,因为如果不使用单引号的情况下就会导致将其解析为表达式
注意其中的onmousemove和onmouseout事件的使用
onmousemove和onmouseout事件的调用,和js使用双引号、单引号的时候应该注意的问题的更多相关文章
- 关于js中单双引号以及转义符的理解
关于js中单引号(')和双引号(")的使用以及转义的理解 这几天一直在画页面,身为开发人员的我之所以要画页面是因为当前项目中的页面上所有的东西都是从数据库中取得的,也就是动态的,类似于我们设 ...
- Js参数值中含有单引号或双引号解决办法
<script type="text/javascript"> function Display(LoginEmail, UserName, ID) { ...
- 输出到网页前台js代码中包含单引号的处理方法
描述:后台输出js到前台,如 <script type="text/javascript"> //<![CDATA[ var aStepD ...
- html & js 单双引号
1.html使用双引号,嵌套亦如此,表示dom元素的属性 <input value="Test" type="button" onclick=" ...
- js单双引号
JavaScript单双引号的使用没有严格的要求,单独出现的时候,用单用双都可以的,但是如果一起出现的话就要严格区分了
- 在js里双引号里又加单引号的解决方案常用WdatePicker
EndTime: '<input name="EndTime" type="text" class="editable center decim ...
- js去掉双引号
替换: d = d.replace("\"","").replace("\"",""); 全部替换: ...
- HTML通过事件传递参数到js 二 event
原文链接http://blog.sina.com.cn/s/blog_8a18c33d010172pp.html event用例: <!DOCTYPE html><html>& ...
- asp.net 调用前台JS调用后台,后台掉前台JS
C#前台js调用后台代码前台js<script type="text/javascript" language="javascript"> func ...
随机推荐
- Hub, bridge, switch, router, gateway的区别
这些概念性的东西,其实,有的区别不是很大,有的区别很大. Hub 就是一个重复转发器,就是从一个port接受到数据后,就会原样的向其他的所有端口发送刚才收到的数据.个人理解为是工作在物理层的东西.但是 ...
- 响应式布局设置--@media only screen and
@media only screen and only(限定某种设备) screen 是媒体类型里的一种 and 被称为关键字,其他关键字还包括 not(排除某种设备) /* 常用类型 */类型 解 ...
- UI-动画
// ------------------UIImageView的动画------------------ // ------------------UIView的动画---------------- ...
- IOS开发小项目—找色块游戏
1.项目代码: @interface NextViewController () { int r ;//色块层数的全局变量 int m;//后面用于tag值的变化 UIView *view;//色块 ...
- Redis启动警告错误解决
启动错误 (1)WARNING: The TCP backlog setting of 511 cannot be enforced because /proc/sys/net/core/somaxc ...
- Hadoop:实战Web日志分析
示例场景 日志说明 有两台Web服务器,日志文件存放在/usr/local/nginx/logs/目录,日志默认为nginx定义格式.如: 123.13.17.13 - - [25/Aug/2016: ...
- TCP/IP四层模型和OSI七层模型的概念
转:http://blog.csdn.net/superjunjin/article/details/7841099/ TCP/IP四层模型 TCP/IP是一组协议的代名词,它还包括许多协议,组成了T ...
- 黄聪:VS2010开发T4模版引擎之基础入门
原文:http://www.cnblogs.com/lzrabbit/archive/2012/07/15/2591085.html 额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又 ...
- java.lang.StackOverflowError: stack size 8MB
java.lang.StackOverflowError: stack size 8MB at android.text.TextUtils.getChars(TextUtils.java:86) a ...
- java.util.concurrent
软件包 java.util.concurrent 的描述 在并发编程中很常用的实用工具类.此包包括了几个小的.已标准化的可扩展框架,以及一些提供有用功能的类,没有这些类,这些功能会很难实现或实现起来冗 ...