如何檢測瀏覽器是否支持拖放、觸摸和BoxShadow？

Question

目前我們正在使用 Modernizr 來檢測瀏覽器是否支持拖放 (DnD)、觸摸和 BoxShadow。 但是現在我們公司已經決定擺脫 Modernizr，所以我們必須對上述功能進行檢查。

關於 Touch 和 BoxShadow，我什么也找不到。 但是對於 DnD，我發現了很多信息，例如我們在 Modernizer 中的類似實現，檢查 div 中的“可拖動”，請參閱以下參考資料：

如何檢查任何元素的 IE 拖放支持

https://gist.github.com/patrickkettner/762017e6f66d8c49027f

檢測 javascript 中的 HTML5 拖放支持

但問題是所有這些問題和可用信息都有 8-10 年的歷史，而且很多人提到這些方法並不完全可靠。 那么，有沒有什么方法可以在不使用任何 3rd 方組件的情況下檢測瀏覽器是否支持 DnD、Touch 和 BoxShadow 功能？

Answer 1

要檢測拖放，您可以檢查元素是否具有拖動事件處理程序屬性並檢測框陰影，您可以使用 CSS @supports at rule：

 var div = document.createElement('div'); console.log({ drag: 'ondrag' in div, touch: 'ontouchstart' in div });

 @supports (box-shadow: initial) { body { background: rebeccapurple; } }

請注意，根據MDN ontouchstart 可能並非每個移動瀏覽器都支持：

編輯：

在檢查了復選框陰影的一些替代方案后：

var boxShadow = CSS.supports('box-shadow', 'initial');

檢查MDN上的支持。

跨瀏覽器 CSS.supports 可以在David Walsh 博客文章中找到。

替代方法是getComputedStyle ，它有更大的瀏覽器支持，您可以在MDN上查看。

 var div = document.createElement('div'); console.log({ drag: 'ondrag' in div, touch: 'ontouchstart' in div, boxShadow: isRed(getComputedStyle(document.body, ':before').color) }); function isRed(color) { var m = color.match(/^rgb\(([^,\s]+)/); if (m) { return +m[1] === 255; } return color === 'red'; }

 @supports (box-shadow: initial) { body::before { color: red; } }

Answer 2

檢測瀏覽器 TOUCH 支持的代碼：

    var isTouchSupported = function () {
    return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
}

檢測瀏覽器 CSS 屬性支持的代碼：

    var isCssPropertySupported = function (cssProperty) {
    var cssPrefix = "Webkit,Moz,O,ms,Khtml".split(",");
    var divElement = document.createElement("div");

    var uProp = cssProperty.charAt(0).toUpperCase() + cssProperty.substr(1);
    var cssPropertyWithAllPrefix = (cssProperty + ' ' + cssPrefix.join(uProp + ' ') + uProp).split(' ');

    for (var i = 0; i < cssPropertyWithAllPrefix.length; i++) {
        if (divElement.style[cssPropertyWithAllPrefix[i]] === "") {
            return true;
        }
    }

    return false;
};

檢測瀏覽器拖放支持的代碼：

var isDragAndDropSupported = function () { return ('draggable' in document.createElement('div')) };