Question

我在页面上放置一个脚本，当用户点击屏幕上的任意位置时，隐藏具有特定类的所有元素。该代码在PC上完美运行，但不适用于平板电脑和手机。我应该只使用Javascript，而不是jQuery。

<script type="text/javascript">
    function onClick(id) {
        var e = document.getElementById(id);
        if(e.className == 'item active') {
            e.className = 'item none';
        }
        else {  
            var x = document.querySelectorAll('.item.active');
            for(var i = 0; i < x.length; i++){
                x[i].className = "item none";
            }
            e.className = 'item active';            
        }
    }

    function findClosest (element, fn) {
        if (!element) return undefined;
        return fn(element) ? element : findClosest(element.parentElement, fn);
    }
    document.addEventListener("click", function(event) {

        if (document.querySelector('.item.active') != null){        
            var t = document.querySelector('.item.active').id;  
        }

        var target = findClosest(event.target, function(el) {
            return el.id == t;
        });
        if (!target) {
            var x = document.querySelectorAll('.item.active');
            for(var i = 0; i < x.length; i++){
                x[i].className = "item none";
            }
        }
    }, false);

</script>

<div id="item1" class="item none" onclick="onClick('item1')">
    ...
</div>

<div id="item2" class="item none" onclick="onClick('item2')">
    ...
</div>  

...

Answer 1

点击事件在PC上有效，因为它与鼠标点击相关联。但是，在桌面和手机上，没有点击事件。相反，您应该使用触摸事件。试试这个：

{
      name: 'Temperature error',
      type: 'errorbar',
      color: 'rgba(0,0,0,0)',
      lineWidth: 20,
      data: [
        [6, 8],
        [5.9, 7.6],
        [9.4, 10.4],
        [14.1, 15.9],
        [18.0, 20.1],
        [21.0, 24.0],
        [23.2, 25.3],
        [26.1, 27.8],
        [23.2, 23.9],
        [18.0, 21.1],
        [12.9, 14.0]
      ]
    }

单击平板电脑和手机之外的元素外部

1 个答案: