Question

我在没有Backbone.js的情况下使用以下代码并且它正常工作 - 防止在尝试拖动图像时出现重影图像：

$(document).ready(function() {
$('img').attr('draggable', false);
document.getElementsByTagName('img').draggable = false;
});

现在我正在学习backbone.js并尝试在Views中实现它，这就是它的外观：

function noDrag () {
        $(that.el).find('img').attr('draggable', false);
        document.getElementsByTagName('img').draggable = false;
    }

    noDrag();

它没有用。

我知道做这项工作的关键是让部件输入代码document.getElementsByTagName('img').draggable = false;才能正常工作。我的代码出了什么问题？

这里是完整的代码：

    window.dolnyPanelView = Backbone.View.extend({
    tagName : 'div',
    className : 'dolnyPanel-menu-view',
    initialize : function() {
        var that = this;
        // tu wybierz template z templates/main.tpl
        this.template = _.template($("#dolnyPanel-view").html());     
        return this;
    },
    events : {

    },
    render : function() {
        var that = this;       
        $(this.el).html(this.template());  
       $(this.el).find('#panel-view').carousel({
         interval: 3000
         });


        var BandCount;

        $.post('api/getBandsCount.php', function(data) {

            BandCount=data;
        });



         var items = getItems(BandCount);
        $(this.el).find('.carousel-inner').html($(items));
        $(this.el).find('.item').first().addClass('active');




         function getItems(BandCount) {
           // console.log(BandCount);
            var allItems = '';
            for (var i = 1; i <= BandCount; i++) {
                var items = '';
                for (var j = 0; j < 6; j++) {
                    if (i <= BandCount) {
                        items += getImageItem(i);
                        i++;
                    }
                }
                allItems += '<div class="item"><div class="row">' + items + '</div></div>';
            }
        return allItems; 
        }

        function getImageItem(id) {
        var item = '<div class="col-md-2 col-sm-3 col-xs-6 artist-col biography-artist-col"><a href="#x" bandId="'+id+'">';

        var src = 'LEKSYKON';

        $.post('api/getAwatar.php', {id: id}, function(data) {

            src = src + data.path;

        }, "json");
        item += '<img src="' + src + '" alt="Image" class="img-responsive artist"></a></div>';
        return item;
    }

        function noDrag () {
            $(that.el).find('img').attr('draggable', false);
            document.getElementsByTagName('img').draggable = false;
        }

        noDrag();


        return this;
    }


});

更新：谢谢您的所有答案，结果证明它不起作用，因为整个观点都不起作用。线程现在可以关闭，不要误会任何人。

Answer 1

document.getElementsByTagName返回NodeList个DOM元素，因此您需要将属性更改应用于每个元素而不是集合本身。

当你正在使用jQuery时，你不需要使用document.getElementsByTagName - 你可以创建另一个jQuery选择。

事实上，这正是你在第一个工作实例中所做的 - document.getElementsByTagName没有在那里做任何事情。

您可以使用jQuery的prop方法可靠地更改选区中所有元素的可切换属性。

$('img').prop('draggable', false);

有关prop与attr的讨论，请参阅this question。

Answer 2

试试这个

//this will get the first img element 
var element = document.getElementsByTagName('img')[0];
//setting value of attribute
element.setAttribute("draggable", false);

如何在Backbone.js中使用document.getElementsByTagName

2 个答案: