分享 前端开发 常用代码片段

分享 :

一、鼠标滚轮


$('#content').on("mousewheel DOMMouseScroll", function (event) {

    // chrome & ie || // firefox

    var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||

        (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));  

    

    if (delta > 0) {

        console.log('mousewheel top');

    } else if (delta < 0) {

        console.log('mousewheel bottom');

    }

});

二、鼠标坐标

1、JavaScript实现


X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />




function mousePosition(ev){

    if(ev.pageX || ev.pageY){

        return {x:ev.pageX, y:ev.pageY};

    }

    return {

        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

        y:ev.clientY + document.body.scrollTop - document.body.clientTop

    };

}

 

function mouseMove(ev){

    ev = ev || window.event;

    

    var mousePos = mousePosition(ev);

    

    document.getElementById('xxx').value = mousePos.x;

    document.getElementById('yyy').value = mousePos.y;

}

document.onmousemove = mouseMove;

2、jQuery实现


$('#ele').click(function(event){

    //获取鼠标在图片上的坐标

    console.log('X:' + event.offsetX+' Y:' + event.offsetY);

    

    //获取元素相对于页面的坐标

    console.log('X:'+$(this).offset().left+' Y:'+$(this).offset().top);

});

三、禁止移动端浏览器页面滚动

1、HTML实现


<body ontouchmove="event.preventDefault()" >

2、JavaScript实现

document.addEventListener('touchmove', function(event) {

    event.preventDefault();

});

四、阻止默认行为


// JavaScript

document.getElementById('btn').addEventListener('click', function (event) {

    event = event || window.event;

 

    if (event.preventDefault){

        // W3C

        event.preventDefault();

    } else{

        // IE

        event.returnValue = false;

    }

}, false);

 

// jQuery

$('#btn').on('click', function (event) {

    event.preventDefault();

});

五、阻止冒泡

// JavaScript

document.getElementById('btn').addEventListener('click', function (event) {

    event = event || window.event;

 

    if (event.stopPropagation){

        // W3C

        event.stopPropagation();

    } else{

        // IE

        event.cancelBubble = true;

    }

}, false);



// jQuery

$('#btn').on('click', function (event) {

    event.stopPropagation();

});



六、检测浏览器是否支持svg


function isSupportSVG() {

    var SVG_NS = 'http://www.w3.org/2000/svg';

    return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;

}

 

console.log(isSupportSVG());


七、检测浏览器是否支持canvas


function isSupportCanvas() {

    if(document.createElement('canvas').getContext){

        return true;

    }else{

        return false;

    }

}

 

console.log(isSupportCanvas());


八、检测是否是微信浏览器


function isWeiXinClient() {

    var ua = navigator.userAgent.toLowerCase();

    if (ua.match(/MicroMessenger/i)=="micromessenger") {

        return true;

    } else {

        return false;

    }

}

 

alert(isWeiXinClient());


九、检测是否移动端及浏览器内核


var browser = {

    versions: function() {

        var u = navigator.userAgent;

        return {

            trident: u.indexOf('Trident') > -1, //IE内核

            presto: u.indexOf('Presto') > -1, //opera内核

            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

            gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko

            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端

            ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios

            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android

            iPhone: u.indexOf('iPhone') > -1 , //iPhone

            iPad: u.indexOf('iPad') > -1, //iPad

            webApp: u.indexOf('Safari') > -1 //Safari

        };

    }

}

 

if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {

    alert('移动端');

}


十、检测是否电脑端/移动端


var browser={

    versions:function(){

        var u = navigator.userAgent, app = navigator.appVersion;

        var sUserAgent = navigator.userAgent;

        return {

        trident: u.indexOf('Trident') > -1,

        presto: u.indexOf('Presto') > -1,

        isChrome: u.indexOf("chrome") > -1,

        isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),

        isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,

        webKit: u.indexOf('AppleWebKit') > -1,

        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,

        mobile: !!u.match(/AppleWebKit.*Mobile.*/),

        ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),

        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,

        iPhone: u.indexOf('iPhone') > -1,

        iPad: u.indexOf('iPad') > -1,

        iWinPhone: u.indexOf('Windows Phone') > -1

        };

    }()

}

if(browser.versions.mobile || browser.versions.iWinPhone){

    window.location = "http:/www.baidu.com/m/";

}


十一、检测浏览器内核


function getInternet(){    

    if(navigator.userAgent.indexOf("MSIE")>0) {    

      return "MSIE";       //IE浏览器  

    }  

 

    if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){    

      return "Firefox";     //Firefox浏览器  

    }  

 

    if(isSafari=navigator.userAgent.indexOf("Safari")>0) {    

      return "Safari";      //Safan浏览器  

    }  

 

    if(isCamino=navigator.userAgent.indexOf("Camino")>0){    

      return "Camino";   //Camino浏览器  

    }  

    if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){    

      return "Gecko";    //Gecko浏览器  

    }    

}


文章分类