您的位置: 首页 > 技术文档 > 网页制作 > [JS]点出统计器
[突破]在线编辑器任意设置字号 回到列表 [奇招] JS暴虐查找法
 [JS]点出统计器

作者:lnsoso 时间: 2006-07-28 文档类型:原创 来自:蓝色理想

ff   默认不让改 status
opera9   测试通过
ie6   测试通过

这东西是给统计部门用的,分析用户习惯以改良网站布局。
只是写着玩的小东西,所以很多地方不太理想。

save() 方法是保存记录的,没仔细做,应该再加个判断浏览器,然后决定用 img 还是 iframe,以保证 request 一定能发出去.
onclick() 方法是触发事件时执行的

使用方法:

在任意页面中加入

CODE:
script src="clickout.js"></script>

最好是放在 </body> 前面,目的是防止 onclick 事件覆盖。

clickout.js

CODE:

/*
* 说明:点出统计器
* 作者:邓威
* 日期:2006-07-25
* 版本:v1.0
*/

function ClickOut()
{
    this.oCO        = null;
    this.src_onclick    = null;
    this.isDEBUG        = true || "status"; // 改成 this.isDEBUG = "status"; 就可以在 window.status 里显示了

    this.debug        = function(arg) {
        if( this.isDEBUG == "status" ) window.status = arg.toString();
        else if ( this.isDEBUG ) alert(arg.toString());
    }

    this.save        = function() {       
        var sUrl = "clickout.php?";
        sUrl += "tag=" + encodeURIComponent(this.click_tag);
        sUrl += "&type=" + encodeURIComponent(this.click_type);
        sUrl += "&src=" + encodeURIComponent(this.click_src);
        sUrl += "&text=" + encodeURIComponent(this.click_text);
        this.oCO = document.createElement('<div id="ClickOut" style="width:0px;height:0px;"></div>');
        document.body.appendChild(this.oCO);   
        document.getElementById("ClickOut").innerHTML =  '<img src="' + sUrl + '" style="display: none;" width="0px" height="0px" \/>';
        return true;
    }

    this.onclick        = function(args) {       
        if( this.src_onclick != null ) this.src_onclick(e);
        var obj = event.srcElement;
        var tag = obj.tagName.toLowerCase();
       
        this.click_id        = obj.id?obj.id:null;
        this.click_class    = obj.className?obj.className:null;
        this.click_name        = obj.name?obj.name:null;
        this.click_tag        = tag;
        this.click_parent    = obj;
        this.click_obj        = obj;
        this.click_path        = tag;

        if( tag == "a" ) {
            this.click_type = "text";
            this.click_src = obj.href;
            this.click_text = obj.innerHTML;
        }
        else if ( tag == "img" ) {
            this.click_type = "pic";
            this.click_src = obj.src;
            this.click_text = obj.alt;
        }
        else if ( tag == "font" || tag == "b" || tag == "strong" ) {
            this.click_type = "text";
            this.click_src = "";
            this.click_text = obj.innerHTML;
        }
        else {
            this.click_type = "layer";
            this.click_src = "" ;
            this.click_text = obj.innerHTML;
        }
       
        this.GetParent();

        this.debug(this.click_path);
        doSave();
    }

    this.GetParent        = function() {       
        if( !this.click_parent.parentNode.tagName ) return;
        this.click_parent = this.click_parent.parentNode;       
        this.click_path = this.click_parent.tagName.toLowerCase() + "[ " +
            (this.click_parent.id?("ID:" + this.click_parent.id):"") +
            (this.click_parent.className?(" ,CLASS:" + this.click_parent.className):"") +
            (this.click_parent.name?(" ,NAME:" + this.click_parent.name):"") +
            " ]" + ">" + this.click_path;   
        this.GetParent();
    }
}

// 实例
var objCO = new ClickOut();
objCO.src_onclick = document.onclick;

function click_tmp() {
    objCO.onclick();
}
function doSave() {
    objCO.save();
}

// bind event
document.onclick = click_tmp;

演示:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

经典论坛讨论:
http://bbs.blueidea.com/thread-2661557-1-1.html

出处:蓝色理想
责任编辑:moby

◎进入论坛网页制作网站综合版块参加讨论

相关文章 更多相关链接
[奇招] JS暴虐查找法
[效果]JS折叠菜单
javascript的函数
CSS+JS构建的图片查看器
一实用的Javascript类库
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
全兼容的纯CSS级联菜单要点浅析
CSS Sprites 图片整合技术
雅安,一场中式旅行
热烈祝贺"醒狮杯"圆满结束
菊花宝典大赏大奖教程《阳台》
交互设计师怎样和产品团队合作
Photoshop打造个性潮流音乐海报
简单解读面包屑
CSS盒模型
Apple与Microsoft网站可用性研究
栏目最新 栏目最新列表
safari 4 新特性
Photoshop制作精美高光流线字
IE下img多余5像素空白解决方法
XHTML1.0与HTML兼容指引16条
JavaScript优化细节
全兼容的纯CSS级联菜单要点浅析
CSS Sprites 图片整合技术
Photoshop打造个性潮流音乐海报
CSS盒模型
45度地图编辑器及游戏开发心得

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文现有 2 条评论 评分:- llllllllllllllllllll + 评分人数: 1 ,平均分: 3.00


sxwsxyz Publish at 2006-11-13 15:28:42
试用ing!!!
没树叶的亚当 Publish at 2006-7-28 18:47:09 评分3
Cool!
您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
《Web标准设计》
《美工神话》
《Flash短片轻松学》
Illustrator CS3质感绘画表现技法
大师之路--Photoshop 完全解析
《用户体验要素》
HTML与CSS入门经典(第7版)
作品集 更多内容

毕业设计。 WESBROOK LogoMark Asia 华硕(Asus)手机 Zt23 家居城 光影练习01 02年临摹的小图 永乐宫壁画白描