0

'$this.css(...)' is null or not an object

收到此错误，但仅在 IE 中（未在 8 以上测试，不需要在其以下测试）

我一直在使用这个可拖动的背景插件，这就是错误的来源。我会在下面发生错误的地方删除一些代码 - 它是此代码段中的第三行

    var x0 = e.clientX
      , y0 = e.clientY
      , pos = $this.css('background-position').match(/(-?\d+).*?\s(-?\d+)/) || []
      , xPos = parseInt(pos[1]) || 0
      , yPos = parseInt(pos[2]) || 0

当我尝试单击并拖动以移动背景时会发生这种情况，它会立即出错

任何建议表示赞赏

谢谢

编辑：下面是完整的脚本

  !function($) {
    var $window = $(window)

    // Helper function to guarantee a value between low and hi unless bool is false
    var limit = function(low, hi, value, bool) {
      if (arguments.length === 3 || bool) {
        if (value < low) return low
        if (value > hi) return hi
      }
      return value
    }

    // Adds clientX and clientY properties to the jQuery's event object from touch
    var modifyEventForTouch = function(e) {
      e.clientX = e.originalEvent.touches[0].clientX
      e.clientY = e.originalEvent.touches[0].clientY
    }

    $.fn.backgroundDraggable = function(options) {
      var options = $.extend({}, $.fn.backgroundDraggable.defaults, options)

      return this.each(function() {
        var $this = $(this)
          , $bg = $this.css('background-image')
          , src = $bg.match(/^url\(['"]?(.*?)['"]?\)$/i)

        // If no background-image css property or no src just return
        if (!$bg || !src) return

        // Get the image's width and height if bound
        var img = { width: 0, height: 0 }
        if (options.bound) {
          var i = new Image
          i.onload = function() {
            img.width = i.width
            img.height = i.height
          }
          i.src = src[1]
        }

        $this.on('mousedown.dbg touchstart.dbg', function(e) {
          e.preventDefault()

          if (e.originalEvent.touches) {
            modifyEventForTouch(e)
          }
          else if (e.which !== 1) {
            return
          }

          var x0 = e.clientX
            , y0 = e.clientY
            , pos = $this.css('background-position').match(/(-?\d+).*?\s(-?\d+)/) || []
            , xPos = parseInt(pos[1]) || 0
            , yPos = parseInt(pos[2]) || 0

          $window.on('mousemove.dbg touchmove.dbg', function(e) {
            e.preventDefault()

            if (e.originalEvent.touches) {
              modifyEventForTouch(e)
            }

            var x = e.clientX
              , y = e.clientY

            xPos = options.axis === 'y' ? xPos : limit($this.innerWidth()-img.width, 0, xPos+x-x0, options.bound)
            yPos = options.axis === 'x' ? yPos : limit($this.innerHeight()-img.height, 0, yPos+y-y0, options.bound)
            x0 = x
            y0 = y

            $this.css('background-position', xPos + 'px ' + yPos + 'px')
          })
        })

        $window.on('mouseup.dbg touchend.dbg', function() { $window.off('mousemove.dbg touchmove.dbg') })
      })
    }

    $.fn.backgroundDraggable.defaults = {
      bound: true
    , axis: undefined
    }
  }(jQuery);
4

3 回答 3

3

正如我在对 OP 的评论中猜测的那样，并由另一位评论员确认，IE 8 根本不支持该特定的 CSS 属性，因此.css()函数的输出是未定义的。

有关详细信息，请参阅修复 IE中的背景位置。

您还可以在https://github.com/brandonaaron/jquery-cssHooks/获取一个 jQuery 插件，在使用 IE 时将 CSS 属性添加到 jQuery （查找 bgpos.js 模块）

于 2013-07-23T13:58:16.317 回答
1

我认为你的意思是$(this).css()，或者this.css，取决于你周围的环境......

所以它似乎$this被定义为$(this)，所以问题出在 css 值background-position上，正如@brewel 在评论中指出的那样：修复 IE 中的背景位置

说

在 Internet 上进行更多的挖掘已经揭示了答案：IE 不理解选择器背景位置。它理解非标准的 background-position-x 和 background-position-y。

于 2013-07-23T13:50:59.937 回答
0

问题不是 .css() 函数，而是参数。MSIE 不读取 backgroundPosition，而是读取 backgroundPositionX 和 backgroundPositionY。

于 2013-07-23T14:01:01.237 回答