Javascript Dropzone添加自定义元素和自定义侦听器

如何向dropzone添加自定义元素和自定义侦听器。我添加了到dropzone区域的自定义链接和一个jquery单击事件，但它似乎不起作用。当您在dropzone区域中单击该链接时，它将触发文件上载窗口。这很奇怪，因为当你们点击删除链接时，它会分别触发删除事件，而不会触发dropzone区域

这是它在网站上的外观：

缩略图是为什么剪的，如果你能告诉我为什么剪，那也很好：）。但主要的问题是，如何使“设置主映像”链接起作用（将此元素和事件添加到dropzone，而不是一般情况，这是我的想法）。提前谢谢

编辑：

Dropzone配置

dropz = new Dropzone('[data-form="announcement"]',
      paramName: 'image',
      acceptedFiles: '.jpg, .jpeg, .png',
      maxFilesize: 2,
      uploadMultiple: true
      autoProcessQueue: false
      parallelUploads: 100
      maxFiles: 10
      clickable: '.file-input'
      previewsContainer: '#preview-file'
      previewTemplate: document.querySelector('#previewTemplate').innerHTML
      init: ->
        myDropzone = this
        console.log(myDropzone.listeners)
        addedFile = false
        proccessedErrors = false
        existedFileCount = 0
        if page is 'PetsArea::AnnouncementsEdit'


          id = $('#announcement_id').val()
          $.ajax(
            method: 'GET'
            url: window.pets.globalVariables.urls.loadImages
            dataType: 'json'
            data:
              id: id
            success: (data) ->
              main_image_id = data['main_link']
              _.each(data['data'], (val) ->
                myDropzone.emit('addedfile', val)
                myDropzone.emit('thumbnail', val, val['url'])
                myDropzone.emit('success', val)
                myDropzone.emit('complete', val)
                myDropzone.files.push(val)
              )
          )

          new_clickable = $('[data-image="main"]')[0]
          new_listener = $.extend({}, myDropzone.listeners[myDropzone.listeners.length - 1])
          new_listener.element = new_clickable
          myDropzone.clickableElements.push(new_clickable)
          myDropzone.listeners.push(new_listener)
          myDropzone.disable()
          myDropzone.enable()

        this.on('addedfile', (file) =>
          addedFile = true
          proccessedErrors = false
          existedFileCount += 1 if file['url']
          if file['id'] is main_image_id
            preview = $('.dz-preview:last-child')
            preview.find('a').remove()
            preview.append(
              '<span data-main="image"><i class="fa fa-crosshairs"></i> Main image</span>'
            )
          else if file['id']
            preview = $('.dz-preview:last-child')
            preview.find('[data-image="main"]').attr('id', "#{file['id']}")
            preview.find('a.dz-remove').attr('id', "#{file['id']}")


          if this.files.length > 10
            this.removeFile(file)
        )

        this.element.querySelector('input[type="submit"]').addEventListener('click', (e) =>
          return unless addedFile and this.files.length > existedFileCount
          form.data('formValidation').validate()
          return unless form.data('formValidation').isValid()
          e.preventDefault()
          e.stopPropagation()
          myDropzone.processQueue()
        )

        this.on('successmultiple', (record, reply) ->
          window.location.href = reply['url']
        )

        this.on('error', (record, reply) ->
          unless proccessedErrors and !addedFile
            myDropzone.removeAllFiles()
            addedFile = false
            proccessedErrors = true
            window.location.reload();
        )
      removedfile: (file) ->
        if file['url']
          id = file['ad-id']
          photoId = file['photo-id']
          image_row = $(this).closest('[data-delete="block"]')
          $.ajax(
            method: 'POST'
            url: window.pets.globalVariables.urls.editPhotoDelete
            data:
              id: id
              photo_id: photoId
            success: (data) ->
              $(file['previewElement']).fadeOut('fast')
          )
        else
          $(file['previewElement']).fadeOut('fast')
    )

dropz=newdropzone（“[data form=“announcement”]”，
paramName:'图像'，
接受的文件：'.jpg、.jpeg、.png'，
最大文件大小：2，
上传倍数：真
自动处理队列：false
并行上传：100
最大文件数：10
可单击：'.file input'
PreviewContainer:“#预览文件”
previewTemplate:document.querySelector（“#previewTemplate”）.innerHTML
初始化：->
myDropzone=这个
console.log（myDropzone.listeners）
addedFile=false
PROCESSEDERRORS=false
existedFileCount=0
如果页面为“PetsArea:：AnnouncementsEdit”
id=$（'#公告_id'）.val（）
$.ajax(
方法：“获取”
url:window.pets.globalVariables.url.loadImages
数据类型：“json”
数据：
id:id
成功：（数据）->
main_image_id=数据['main_link']
_.每个（数据['data']，（val）->
myDropzone.emit（'addedfile'，val）
emit（'thumbnail'，val，val['url']））
myDropzone.emit（'success'，val）
myDropzone.emit（'complete'，val）
myDropzone.files.push（val）
)
)
新建可点击=$（'[data image=“main”]'）[0]
new_listener=$.extend（{}，myDropzone.listeners[myDropzone.listeners.length-1]）
new\u listener.element=可点击新建
myDropzone.clickableElements.push（新建可点击）
myDropzone.listeners.push（新建侦听器）
myDropzone.disable（）文件
myDropzone.enable（）
this.on（'addedfile'，（文件）=>
addedFile=true
PROCESSEDERRORS=false
如果文件['url']
如果文件['id']是主图像\u id
预览=$（'.dz预览：最后一个子项'）
preview.find（'a'）.remove（）
preview.append(
“主图像”
)
else if文件['id']
预览=$（'.dz预览：最后一个子项'）
preview.find（'[data image=“main”]'）.attr（'id'，“#{file['id']}”）
preview.find（'a.dz-remove'）.attr（'id'，“#{file['id']}”）
如果此.files.length>10
此.removeFile（文件）
)
this.element.querySelector（'input[type=“submit”]”）。addEventListener（'click'，（e）=>
除非addedFile和this.files.length>existedFileCount，否则返回
form.data（'formValidation'）.validate（）
除非form.data（'formValidation'）.isValid（）返回
e、 预防默认值（）
e、 停止传播（）
myDropzone.processQueue（）
)
此.on（'successmultiple'，（记录，回复）->
window.location.href=reply['url']
)
此.on（'错误'，（记录，回复）->
除非处理错误和！添加文件
myDropzone.removeAllFiles（）
addedFile=false
PROCESSEDERRORS=真
window.location.reload（）；
)
removedfile：（文件）->
如果文件['url']
id=文件['ad-id']
photoId=文件['photo-id']
image_row=$（this）.closest（'[data delete=“block”]'））
$.ajax(
方法：“发布”
url:window.pets.globalVariables.url.editPhotoDelete
数据：
id:id
照片id:photoId
成功：（数据）->
$（文件['previewElement']）。淡出（'fast'）
)
其他的
$（文件['previewElement']）。淡出（'fast'）
)

外部链接：

 $('[data-image="main"]').click ->
      e.preventDefault()
      e.stopPropagation()
      id = $(this).attr('id')
      prev_main_image = $("[data-image='main'] a##{main_image_id}").closest('.dz-preview')
      prev_main_image.find('[data-image="main"]').remove()
      prev_main_image.append('<a class="dz-remove" href="javascript:undefined" data-dz-remove><i class="fa fa-trash"></i> Remove file</a> +' +
          '<a data-image="main"><i class="fa fa-crosshairs main-image"></i> Set main image</a>')

      cur_main_image = $("[data-image='main'] a##{id}").closest('.dz-preview')
      cur_main_image.find('a').remove()
      cur_main_image.append('<span><i class="fa fa-crosshairs"></i> Main image</span>')

$（'[data image=“main”]'）。单击->
e、 预防默认值（）
e、 停止传播（）
id=$（this.attr（'id'））
prev_main_image=$（“[data image='main']a#{main_image_id}”）。最近（'.dz preview'））
prev_main_image.find（'[data image=“main”]'）。remove（）
prev_main_image.append（'+'+
'设置主映像'）
cur#u main_image=$（“[data image='main']a##{id}”）。最近（'.dz preview'））
cur_main_image.find（'a'）.remove（）
cur_main_image.append（'main image'）

我非常确定您描述的行为是由于传播，但有些代码有助于回答您的问题。好的，请参阅编辑。我非常确定您描述的行为是由于传播，但有些代码有助于回答您的问题。好的，请参阅编辑。