一、阻止默认行为

　　return false;

自定义右键菜单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#ul1{ list-style:none; display:none; width:100px; padding:5px; background:#ddd; border:1px solid ddd; color:#333; line-height:24px; position:absolute;}
</style>
<script>
document.oncontextmenu = function(ev)
{
    var oEvent = ev || event;
    var oUl = document.getElementById('ul1');
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    oUl.style.left = oEvent.clientX + 'px';
    oUl.style.top = oEvent.clientY + scrollTop + 'px';
    oUl.style.display = 'block';
    return false;
};

document.onclick = function()
{
    var oUl = document.getElementById('ul1');
    oUl.style.display = 'none';
};

</script>
</head>

<body style="height:2000px;">
<ul id="ul1">
    <li>复制</li>
    <li>粘贴</li>
    <li>剪切</li>
    <li>撤销</li>
</ul>
</body>
</html>

拖拽

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute;}
</style>
<script>
window.onload = function()
{
    var oDiv = document.getElementById('div1');
    var disX = 0;
    var disY = 0;

    oDiv.onmousedown = function(ev)
    {
        var oEvent = ev || event;
        disX = oEvent.clientX - oDiv.offsetLeft;
        disY = oEvent.clientY - oDiv.offsetTop;

        document.onmousemove = function(ev)
        {
            var oEvent = ev || event;
            var iX = oEvent.clientX - disX;
            var iY = oEvent.clientY - disY;

            if(iX < 0)
            {
                iX = 0;
            }
            else if( iX > document.documentElement.clientWidth - oDiv.offsetWidth)
            {
                iX = document.documentElement.clientWidth - oDiv.offsetWidth;
            }
            if(iY < 0)
            {
                iY = 0;
            }else if( iY > document.documentElement.clientHeight - oDiv.offsetHeight)
            {
                iY = document.documentElement.clientHeight - oDiv.offsetHeight;
            }

            oDiv.style.left = iX + 'px';
            oDiv.style.top = iY + 'px';
        };

        document.onmouseup = function()
        {
            document.onmousemove = null;
            document.onmouseup = null;
        };

        return false;

    };
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

javascript每日一练（八）——事件三：默认行为的更多相关文章

  1. javascript每日一练（七）——事件二：键盘事件

    一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...

  2. javascript每日一练（六）——事件一

    一.event对象 var oEvent = ev || event;//获取事件对象 oEvent.clientX oEvent.clientY//获取鼠标坐标 oEvent.cancelBubbl ...

  3. javascript每日一练（三）——DOM一

    一.Dom基础 childNodes(有兼容问题),children nodeType getAttribute() firstChild,lastChild,previousSilbing,next ...

  4. javascript每日一练（一）——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  5. javascript每日一练（十三）——运动实例

    一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  6. javascript每日一练（五）——BOM

    一.BOM打开,关闭窗口 window.open(); window.close(); <!doctype html> <html> <head> <meta ...

  7. javascript每日一练—运动

    1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  8. javascript每日一练（十四）——弹性运动

    一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  9. javascript每日一练（十二）——运动框架

    运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...

随机推荐

  1. HDU 1465 不容易系列之排错

    Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Description 大家常常感 ...

  2. Linux下安装JRE

    (1)下载jre-7u5-linux-i586.tar.gz,上传至/root目录 (2)执行tar -zxf jre-7u5-linux-i586.tar.gz (3)mv jre1.7.0_05 ...

  3. linux下出现java.net.UnknownHostException

    项目部署在win环境下没问题,但是在迁移生产环境的时候出现Java.net.UnknowHostException 原因在于etc/hosts 文件没有配置域名映射,使用vi编辑器加上服务器ip 以及 ...

  4. D1-Linux-CentOS学习打卡

    从一月底开始萌生了想在继续学Python的时候,学一门新的操作系统. 在看很多程序员的JD时,很多都要求熟悉LINUX,并且奔方法里面也提到了在LINUX下的编程. ----------------- ...

  5. 【转】OCR识别引擎tesseract使用方法——安装leptonica和libtiff

    原文来自:http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c4224 ...

  6. 转: sublime text 2 前端编码神器-快捷键与使用技巧介绍

    代码编辑器或者文本编辑器,对于程序员来说,就像剑与战士一样,谁都想拥有一把可以随心驾驭且锋利无比的宝剑,而每一位程序员,同样会去追求最适合自己的强大.灵活的编辑器,相信你和我一样,都不会例外. 如果说 ...

  7. 开发记录_自学Python写爬虫程序爬取csdn个人博客信息

    每天刷开csdn的博客,看到一整个页面,其实对我而言,我只想看看访问量有没有上涨而已... 于是萌生了一个想法: 想写一个爬虫程序把csdn博客上边的访问量和评论数都爬下来. 打算通过网络各种搜集资料 ...

  8. HDU 4734 F(x) 2013 ACM/ICPC 成都网络赛

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4734 数位DP. 用dp[i][j][k] 表示第i位用j时f(x)=k的时候的个数,然后需要预处理下小 ...

  9. db2 xml 转 table【XQuery系列】

    版本号:DB2 Version 9.1 1.创建測试表,初始化数据 create table emp (doc XML);   INSERT INTO EMP VALUES ('<dept bl ...

  10. 中国A股市场缘何遭遇9连跌？

    端午长假刚过,当投资者对“红六月”预期信心满满的时候,A股市场却遭遇了诡异的跌势,截止6月17日收盘,A股出现了罕见的“9连跌”.不仅上证综指失守2200点年线整数位,深证成指跌幅则高达3%以上,而且 ...