<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

function GetPosition(obj){

}

$(function(){

    $(".div1").click(function(event){

            event.stopPropagation();

            //var obj = $(".div1")[0];

            var obj = $(this)[0];

            var left = 0;

            var top   = 0;

            while(obj != document.body){

                left = obj.offsetLeft + left;

                top   = obj.offsetTop + top;

                obj = obj.offsetParent;

            }

            alert("Left : " + left + "\r\n" + "Top : " + top);

    });

});

</script>

<style type="text/css">

*{margin:0px;padding:0px;}

.div1{

    position:relative;

    background:#fcc;

    border-bottom:solid 1px #000;

    border-left:solid 1px #f00;

    left:200px;

}

</style>

</head>

<body>

<h3>得到当前对象在不同大小的页面中的绝对位置，及冒泡cancelBubble</h3>

<br><br><br><br>

<input type="button" value="btn" id="btn">

<div class="div1">div000

    <div class="div1">div1

    </div>

    <div class="div1">div111

    </div>

    <div class="div1">div11133

    </div>

    <div class="div1">div1114

    </div>

    <div class="div1">div1115

        <div class="div1">div111511

        </div>

        <div class="div1">div111511

        </div>

    </div>

    <div class="div1">div1116

    </div>

</div>

</body>

</html>

得到当前对象在不同大小的页面中的绝对位置，及冒泡cancelBubble的更多相关文章

  1. Java常量,变量,对象(字面量)在JVM内存中的存储位置

    Java常量,变量,对象(字面量)在JVM内存中的存储位置 2019-02-26 18:13:09 HD243608836 阅读数 540  收藏 更多 分类专栏: JAVA jvm   苦苦研究了快 ...

  2. 工作总结 返回 json 后台对象中，某一个字段设为string 整个对象转换为json 返回到页面中

    JsonRequestBehavior.AllowGet作用 若要允许 GET 请求,请将 JsonRequestBehavior 设置为 AllowGet MVC 默认 Request 方式为 Po ...

  3. javascript基础之javascript的存在形式和js代码块在页面中的存放位置

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  4. getBoundingClientRect方法获取元素在页面中的相对位置

    获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBou ...

  5. js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  6. JavaScript脚本在页面中放置的位置

    JavaScript脚本通常放置在三个位置: 1.head部分JavaScript脚本. 2.body部分JavaScript脚本. 3.单独以.js结尾的文件中的JavaScript脚本. 客户端会 ...

  7. js实现点击按钮显示某个区域 然后点击页面中任意其他位置，隐藏该区域

    $(".licat-header-list").on("click",function(e){ $(this).addClass("active&qu ...

  8. C# Eval在aspx页面中的用法及作用

    Eval( " ")和Bind( " ") 这两种一个单向绑定,一个双向绑定,bind是双向绑定,但需数据源支持 ASP.NET 2.0改善了模板中的数据绑定操 ...

  9. MVC中 _ViewStart _Layout Index三个页面中的加载顺序

    MVC学习中忽然想到一个问题.. 在访问一个Index.cshtml页面时, MVC的加载顺序是怎么样的呢? 首先说下我的结论 . _ViewStart.cshtml . Index.cshtml . ...

随机推荐

  1. PHPEmailer使用简介（以qq邮箱为例）

    1.从网上下载PHPEmailer: 2.确保PHP环境支持sockets扩展,还要开启openssl,如下图: 3.配置QQ邮箱 1.开启SMTP服务 2.验证密保 3.获取授权码(这个就是IMAP ...

  2. POJ 2585：Window Pains（拓扑排序）

    Window Pains Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2524   Accepted: 1284 Desc ...

  3. 51Nod：1995 三子棋

    1995 三子棋  题目来源: syu校赛 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 小的时候大家一定玩过"井"字棋吧.也就是在 ...

  4. React中如何优雅的捕捉事件错误

    React中如何优雅的捕捉事件错误 前话 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...

  5. hdu1087 dp（最大上升子序列和）

    题意,给出一列数,要求所有上升子序列中序列和最大的. 这回不是求长度了,但是还是相当基础的 dp 水题,只要用 dp [ q ] 记录以 第 q 个数 a [ q ] 为结尾的上升子序列的最大的和就可 ...

  6. 51Nod1526 分配笔名

    分析 在trie树上贪心,将所有串加入trie树中,在深度较深的地方匹配会更优. 由于只需要知道最后的总质量,所以直接取每个点的子树中最大的匹配即可 复杂度\(O(\sum len)\) 加串的时候把 ...

  7. 常用css样式函数总结

    1:按钮样式 /*按钮*/ @mixin btn-style($btnwidth, $color, $bgcolor, $bdcolor) { width: $btnwidth; height: 30 ...

  8. 1920*1080分辨率和1080p,1080i的关系

    1080i和1080p是由美国电影电视工程师协会确定的高清标准格式,其中1080p被称为目前数字电视的顶级显示格式,这种格式的电视在逐行扫描下能够达到1920×1080的分辨率.受限制于存储介质(一部 ...

  9. adnanh webhook 框架execute-command 以及参数传递处理

      adnanh webhook是一个很不错的webhook 实现,方便灵活. adnanh webhook 支持以下功能: 接收请求 解析header 以及负载以及查询变量 规则检查 执行命令 下面 ...

  10. 一个简单的批量更新oracle 数据库中 最近的服务商名称的数据

    有一个需求是这样的,我们需要更新数据库中的数据,数据时这样的 1.大约50万以上 2. 数据中有较多的重复数据 3. 需要将表中最近的代理商的名称赋值给行中的服务商名称 4. 代理商的名称可能有多个, ...