所有由罗佳(博主)发布的文章

无聊产物

【Javascript】Object2HTML

发表回复

把特定格式的js对象转换成HTML元素

https://coding.net/u/luojia/p/Object2HTML/git

演示对象

1
2
3
4
5
6
7
{_:'div',
    child:[
        {_:'button',prop:{innerHTML:'poi'},event:{'click':function(){alert('niconiconi');}}},
        {_:'br'},
        {_:'video',prop:{src:'http://www.w3school.com.cn/example/html5/mov_bbb.mp4'},attr:{controls:true}}
    ]
}

结果

 

悠哉博主的日常

20岁啦

6条评论

我在这个世界上存活20年啦，佳佳酱也持续运行了4年又4个多月。

现在大二上半学期。

前两天买了200条绿箭口香糖。为了解决笑起来只有一边有酒窝的问题。

凌晨1点56分的时候看完了 龙与虎 给自己拍了一脸狗粮。

目前在佳佳酱里公开的文章共有502篇。

吉他(GUItar)稍微有一点点会弹了，小提琴(Varlet)依然不会拉。

目前主要用的语言是中文，JavaScript。

稍微会一点点日本語。

有随身携带着4部手机的习惯，分别是Pixel XL，iPhone6 Plus，Nexus5，移动话费机。

没有去看《你的名字》。

还听着μ’s的歌。

好像胖了不少。

17号就要考英语六级了，希望过。虽然并没有复习。

在Steam库里有67只游戏和两只软件。

打算用写这篇博文当做过完生日。

于是用连接到32寸大屏幕的Surfacebook写下了这篇博文。

留给以后的佳佳用来回忆以前的时光。

悠哉博主的日常

【Javascript】触摸拖动事件

发表回复

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(function(){
var extendEventDefaultOpt={
    touchdrag:{
        preventDefault:true,//阻止触摸移动的默认行为
        allowMultiTouch:false//允许在多点触控时也触发这个事件
    }
}
window.extendEvent={//扩展事件
    touchdrag:function(element,opt){
        var stats={},opt=Object.assign({},extendEventDefaultOpt.touchdrag,opt);
        element.addEventListener('touchstart',function(e){
            if(!opt.allowMultiTouch && e.changedTouches.length>1){stats={};return;}
            var ct=e.changedTouches;
            for(var t=ct.length;t--;){
                stats[ct[t].identifier]={x:ct[t].clientX,y:ct[t].clientY};
            }
        });
        element.addEventListener('touchmove',function(e){
            if(!opt.allowMultiTouch && e.touches.length>1){stats={};return;}
            var ct=e.changedTouches;
            for(var t=ct.length;t--;){
                var id=ct[t].identifier;
                if(!id in stats)continue;//不属于这个元素的事件
                var event=new TouchEvent('touchdrag',e);
                event.deltaX=ct[t].clientX-stats[id].x;
                event.deltaY=ct[t].clientY-stats[id].y;
                stats[id].x=ct[t].clientX;
                stats[id].y=ct[t].clientY;
                element.dispatchEvent(event);
            }
            if(opt.preventDefault)e.preventDefault();
        });
        element.addEventListener('touchend',function(e){
            var ct=e.changedTouches;
            for(var t=ct.length;t--;){
                var id=ct[t].identifier;
                if(id in stats)delete stats[id];
            }
        });
    }
}
})();

这是我做的一个自定事件，在其Event对象上会带有deltaX和deltaY两个属性以表示触摸拖动的偏移量。

用法是

1
extendEvent.touchdrag(元素,选项Object) //在元素上启用这个自定义事件

选项object的属性见上面源码里 extendEventDefaultOpt 对象的两个属性。
然后当手指在元素上拖动的时候就会触发touchdrag事件。
继续阅读【Javascript】触摸拖动事件 →

无聊产物

【Javascript】判断是否为触摸操作模式

发表回复

写了段代码可以用来识别用户的操作方式是否为触摸。

首先需要给元素加一个便于批量添加事件的on方法（我自认为这么写没什么毛病

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function(){
    function Extent_On_Event(){
        if(arguments[0] instanceof Array){
            var arg=arguments,es=arguments[0];
            es.forEach(function(e){
                arg[0]=e;
                this.addEventListener.apply(this,arg);
            });
        }else{
            this.addEventListener.apply(this,arguments);
        }
        return this;
    };
    (window.EventTarget||window.Node).prototype.on=Extent_On_Event;
    if(!window.on)Window.prototype.on=Extent_On_Event;
})();

然后定义判断触摸模式的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
(function(){
    var isTouchMode=window.touchMode=('ontouchstart' in window);
    var mouseEventRec=0;
    function touchModeEvent(node){
        node.on(['touchstart','touchend','touchmove'],function(){
            mouseEventRec&&(mouseEventRec=0);
            if(isTouchMode)return;
            isTouchMode=window.touchMode=true;
            var e=new Event('touchModeChange');
            e.touchMode=isTouchMode;
            window.dispatchEvent(e);
        });
        node.on('mousemove',function(){
            if(!isTouchMode)return;
            mouseEventRec++;
            if(mouseEventRec>4){
                isTouchMode=window.touchMode=false;
                var e=new Event('touchModeChange');
                e.touchMode=isTouchMode;
                window.dispatchEvent(e);
            };
        });
    }
    touchModeEvent(window);
})();

这段代码的作用

  • 在 window 对象上定义touchMode变量，值为boolean，为true时是触摸模式，为false时是非触摸模式（大概就是鼠标模式）。如果你不希望出现此变量，删除相关赋值代码即可。
  • 模式变动时在 window 对象上触发 touchModeChange 事件，event对象的touchMode属性为变动后的值。

在支持触摸的设备上，touchMode默认为true，移动鼠标后会转变为false。我认为这个地方是有点毛病的，但是不知道如何正确判断初始状态。

对于阻止以上代码中事件冒泡到window的元素，需要额外执行相关的监听代码以保证正确性。