Üst öğenin 'dragleave', alt öğelerin üzerine sürüklenirken tetiklenir

genel bakış

Aşağıdaki HTML yapısı var ve öğeye dragenterve dragleaveolayları <div id="dropzone">ekledim.

<div id="dropzone">
    <div id="dropzone-content">
        <div id="drag-n-drop">
            <div class="text">this is some text</div>
            <div class="text">this is a container with text and images</div>
        </div>
    </div>
</div>

Sorun

Bir dosyayı üzerine sürüklediğimde <div id="dropzone">, dragenterolay beklendiği gibi tetiklenir. Ancak, faremi bir öğe üzerinde gezdirdiğimde, öğe <div id="drag-n-drop">için dragenterolay tetiklenir <div id="drag-n-drop">ve sonra öğe için dragleaveolay tetiklenir <div id="dropzone">.

<div id="dropzone">Tekrar öğenin üzerine gelirseniz , dragenterolay tekrar tetiklenir, bu da serindir, ancak daha sonra dragleaveolay, alt öğe için bırakılır, bu nedenle removeClasstalimat, yürütülür, bu da serin değildir.

Bu davranış 2 nedenden dolayı sorunludur:

1. Sadece ekliyorum dragenterve dragleavebu <div id="dropzone">yüzden çocuk öğelerinin neden bu olaylara bağlı olduğunu anlamıyorum.

2. Hala <div id="dropzone">çocuklarının üzerine gelirken elemanın üzerine sürüklüyorum, bu yüzden dragleaveateş etmek istemiyorum !

jsFiddle

İşte şaka yapmak için bir jsFiddle: http://jsfiddle.net/yYF3S/2/

Soru

Öyleyse ... bir <div id="dropzone">öğeyi öğenin dragleaveüzerine sürüklediğimde, herhangi bir alt öğenin üzerine sürüklesem bile ateşlemeyecek şekilde nasıl yapabilirim ... sadece <div id="dropzone">öğeyi terk ettiğimde ateşlenmelidir .. . gezinip / elemanın sınırları içinde herhangi bir yerde etrafında sürükleyerek olmamalı tetikleyecek dragleaveolayı.

En azından HTML5 sürükle-bırak özelliğini destekleyen tarayıcılarda çapraz tarayıcı uyumlu olması gerekiyor, bu yüzden bu cevap yeterli değil.

Google ve Dropbox bunu çözmüş gibi görünüyor, ancak kaynak kodları küçültülmüş / karmaşık olduğundan, uygulamalarından anlayamadım.

Olayları alt öğelere bağlamanız gerekmiyorsa, her zaman pointer-events özelliğini kullanabilirsiniz.

.child-elements {
  pointer-events: none;
}

Sonunda mutlu olduğum bir çözüm buldum. Aslında istediğimi yapmanın birkaç yolunu buldum ama hiçbiri şu anki çözüm kadar başarılı değildi ... bir çözümde, #dropzoneöğeye bir kenarlık eklemek / kaldırmak için sık sık titreme yaşadım ... başka bir kenarda tarayıcıdan uzaklaşırsanız hiçbir zaman kaldırılmadı.

Neyse, benim en iyi hacky çözüm şudur:

var dragging = 0;

attachEvent(window, 'dragenter', function(event) {

    dragging++;
    $(dropzone).addClass('drag-n-drop-hover');

    event.stopPropagation();
    event.preventDefault();
    return false;
});

attachEvent(window, 'dragover', function(event) {

    $(dropzone).addClass('drag-n-drop-hover');

    event.stopPropagation();
    event.preventDefault();
    return false;
});

attachEvent(window, 'dragleave', function(event) {

    dragging--;
    if (dragging === 0) {
        $(dropzone).removeClass('drag-n-drop-hover');
    }

    event.stopPropagation();
    event.preventDefault();
    return false;
});

Bu oldukça iyi çalışıyor ama Firefox'ta sorunlar ortaya çıktı çünkü Firefox çift davetliydi, dragenterbu yüzden sayacım kapalıydı. Ama yine de, çok zarif bir çözüm değil.

Sonra bu soru üzerine tökezledi: Pencerenin dışına sürüklerken Firefox'ta dragleave olayı nasıl algılanır

Bu yüzden cevabı aldım ve durumuma uyguladım:

$.fn.dndhover = function(options) {

    return this.each(function() {

        var self = $(this);
        var collection = $();

        self.on('dragenter', function(event) {
            if (collection.size() === 0) {
                self.trigger('dndHoverStart');
            }
            collection = collection.add(event.target);
        });

        self.on('dragleave', function(event) {
            /*
             * Firefox 3.6 fires the dragleave event on the previous element
             * before firing dragenter on the next one so we introduce a delay
             */
            setTimeout(function() {
                collection = collection.not(event.target);
                if (collection.size() === 0) {
                    self.trigger('dndHoverEnd');
                }
            }, 1);
        });
    });
};

$('#dropzone').dndhover().on({
    'dndHoverStart': function(event) {

        $('#dropzone').addClass('drag-n-drop-hover');

        event.stopPropagation();
        event.preventDefault();
        return false;
    },
    'dndHoverEnd': function(event) {

        $('#dropzone').removeClass('drag-n-drop-hover');

        event.stopPropagation();
        event.preventDefault();
        return false;
    }
});

Bu temiz ve zarif ve şimdiye kadar test ettiğim her tarayıcıda çalışıyor gibi görünüyor (henüz IE test etmedim).

Bu biraz çirkin ama lanet olsun! ...

'Dragenter' işleyicinizde event.target'ı (kapatmanızın içindeki bir değişkende veya herhangi bir şekilde) saklayın, ardından 'dragleave' işleyicinizde kodunuzu yalnızca event.target === sakladığınız kodla çalıştırın.

'Dragenter'ınız istemediğiniz zaman (yani alt öğelerden ayrıldıktan sonra girerken) ateş ediyorsa, fare üst öğeden ayrılmadan önce en son tetiklendiğinde, üst öğede olur, bu nedenle üst öğe her zaman amaçlanan 'dragleave' öncesi son 'dragenter'.

(function () {

    var droppable = $('#droppable'),
        lastenter;

    droppable.on("dragenter", function (event) {
        lastenter = event.target;
        droppable.addClass("drag-over");            
    });

    droppable.on("dragleave", function (event) {
        if (lastenter === event.target) {
            droppable.removeClass("drag-over");
        }
    });

}());

İlk başta, bu pointer-events: noneyaklaşımı reddeden millet ile anlaştım . Ama sonra kendime sordum:

Sürükleme işlemi devam ederken alt öğeler üzerinde çalışmak için gerçekten işaretçi etkinliklere ihtiyacınız var mı?

Benim durumumda, ben sürü vb inline-düzenleme ek işlemler için düğmeler göstermek için örn vurgulu, çocuklarda oluyor var ... Ancak, hiçbiri bunun gerekli ve hatta istenen aslında sırasında bir sürükle.

Benim durumumda, işaretçi olaylarını üst kabın tüm alt düğümleri için seçici olarak kapatmak için böyle bir şey kullanıyorum:

  div.drag-target-parent-container.dragging-in-progress * {
    pointer-events: none;
  }

/ Eklemek sınıfını kaldırmak için favori yaklaşımı kullanın dragging-in-progressiçinde dragEnter/ dragLeavebenim yaptığım gibi, olay işleyicileri veya aynı in yapmak dragStart, et. ark.

Bu bir Chrome hatası gibi görünüyor.

Düşünebildiğim tek çözüm, etkinliklerinizi yakalamak için şeffaf bir yer paylaşımı öğesi oluşturmaktı: http://jsfiddle.net/yYF3S/10/

JS :

$(document).ready(function() {
    var dropzone = $('#overlay');

    dropzone.on('dragenter', function(event) {
        $('#dropzone-highlight').addClass('dnd-hover');
    });

    dropzone.on('dragleave', function(event) {
        $('#dropzone-highlight').removeClass('dnd-hover');
    });

});​

HTML :

<div id="dropzone-highlight">
    <div id="overlay"></div>

    <div id="dropzone" class="zone">
        <div id="drag-n-drop">
            <div class="text1">this is some text</div>
            <div class="text2">this is a container with text and images</div>
        </div>
    </div>
</div>

<h2 draggable="true">Drag me</h2>
​

Sorun şu ki, dropzones içindeki elemanlarınız elbette dropzone'un bir parçası ve çocuklara girdiğinizde ebeveynleri terk ediyorsunuz. Bunu çözmek kolay değil. Sınıfınıza tekrar ebeveyninize ekleyerek çocuklara etkinlik eklemeyi deneyebilirsiniz.

$("#dropzone,#dropzone *").on('dragenter', function(event) {

    // add a class to #dropzone

    event.stopPropagation(); // might not be necessary
    event.preventDefault();
    return false;
});

Etkinlikleriniz birden çok kez tetiklenecek, ancak kimse görmeyecek.

// Düzenle: dragleave olayının üzerine kalıcı olarak yazmak için dragmove olayını kullanın:

$("#dropzone,#dropzone *").on('dragenter dragover', function(event) {

    // add a class to #dropzone

    event.stopPropagation(); // might not be necessary
    event.preventDefault();
    return false;
});

Dragleave olayını yalnızca dropzone için tanımlayın.

As benr belirtilen bu cevap , sen olaylara ateşe alt düğümlerin önleyebilir, ancak bazı olayları bağlamak gerekirse, şunu yapın:

#dropzone.dragover *{
   pointer-events: none;
}

Ve bunu JS kodunuza ekleyin:

$("#dropzone").on("dragover", function (event) {
   $("#dropzone").addClass("dragover");
});

$("#dropzone").on("dragleave", function (event) {
   $("#dropzone").removeClass("dragover");
});

JQuery kullanıyorsanız, şuraya bakın: https://github.com/dancork/jquery.event.dragout

Gerçekten harika.

Gerçek sürükle yaprak işlevselliğini işlemek için özel etkinlik oluşturuldu.

HTML5 dragleave olayı daha çok fareyle benzer şekilde çalışır. Bu eklenti, sürüklerken mouseleave stil işlevselliğini çoğaltmak için oluşturuldu.

Kullanım Örneği:

$ ('# myelement'). on ('dragout', function (event) {// KODUNUZ});

EDIT: aslında, jQuery bağımlı olduğunu sanmıyorum, muhtemelen sadece onsuz bile kullanabilirsiniz.

@hristo Çok daha zarif bir çözümüm var. Kullanabileceğiniz bir şey olup olmadığını kontrol edin.

Sonuçta çabanız boşa gitmedi. İlk başta sizinkini kullanmayı başardım, ancak FF, Chrome'da farklı sorunlar yaşadım. Çok fazla saat geçirdikten sonra bu öneriyi tam olarak planlandığı gibi çalıştırabildim.

Uygulama şu şekildedir. Kullanıcıları bırakma bölgesi hakkında doğru şekilde yönlendirmek için görsel ipuçlarından da yararlandım.

$(document).on('dragstart dragenter dragover', function(event) {    
    // Only file drag-n-drops allowed, http://jsfiddle.net/guYWx/16/
    if ($.inArray('Files', event.originalEvent.dataTransfer.types) > -1) {
        // Needed to allow effectAllowed, dropEffect to take effect
        event.stopPropagation();
        // Needed to allow effectAllowed, dropEffect to take effect
        event.preventDefault();

        $('.dropzone').addClass('dropzone-hilight').show();     // Hilight the drop zone
        dropZoneVisible= true;

        // http://www.html5rocks.com/en/tutorials/dnd/basics/
        // http://api.jquery.com/category/events/event-object/
        event.originalEvent.dataTransfer.effectAllowed= 'none';
        event.originalEvent.dataTransfer.dropEffect= 'none';

         // .dropzone .message
        if($(event.target).hasClass('dropzone') || $(event.target).hasClass('message')) {
            event.originalEvent.dataTransfer.effectAllowed= 'copyMove';
            event.originalEvent.dataTransfer.dropEffect= 'move';
        } 
    }
}).on('drop dragleave dragend', function (event) {  
    dropZoneVisible= false;

    clearTimeout(dropZoneTimer);
    dropZoneTimer= setTimeout( function(){
        if( !dropZoneVisible ) {
            $('.dropzone').hide().removeClass('dropzone-hilight'); 
        }
    }, dropZoneHideDelay); // dropZoneHideDelay= 70, but anything above 50 is better
});

İki sentim: Dropzone'unuzun üzerinde bir katmanı gizleyin, ardından sürükleyiciyi sürüklediğinizde gösterin ve sürükleme yaprakını hedefleyin.

Demo: https://jsfiddle.net/t6q4shat/

HTML

<div class="drop-zone">
  <h2 class="drop-here">Drop here</h2>
  <h2 class="drop-now">Drop now!</h2>
  <p>Or <a href="#">browse a file</a></p>
  <div class="drop-layer"></div>
</div>

CSS

.drop-zone{
  padding:50px;
  border:2px dashed #999;
  text-align:center;
  position:relative;
}
.drop-layer{
  display:none;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:5;
}
.drop-now{
  display:none;
}

JS

$('.drop-zone').on('dragenter', function(e){
    $('.drop-here').css('display','none');
    $('.drop-now').css('display','block');
    $(this).find('.drop-layer').css('display','block');
    return false;
});

$('.drop-layer').on('dragleave', function(e){
    $('.drop-here').css('display','block');
    $('.drop-now').css('display','none');
    $(this).css('display','none');
    return false;
});

Bu yüzden benim için yaklaşım pointer-events: none;çok işe yaramadı ... İşte benim alternatif çözümüm:

    #dropzone {
        position: relative;
    }

    #dropzone(.active)::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
    }

Bu şekilde dragleaveebeveyn (çocukta) veya dragoveralt eleman için mümkün değildir . Bu yardımcı olur umarım :)

* '.Active' sınıfı ben dragenterveya eklediğimde ekliyorum dragleave. Ama eğer onsuz çalışıyorsanız, sadece sınıfı uzak tutun.

Bunun için süper basit hızlı düzeltme, kapsamlı bir şekilde test edilmedi, ancak şu anda Chrome'da çalışıyor.

Kahveyi affedin.

  dragEndTimer = no

  document.addEventListener 'dragover', (event) ->
    clearTimeout dragEndTimer
    $('body').addClass 'dragging'
    event.preventDefault()
    return no

  document.addEventListener 'dragenter', (event) ->
    $('section').scrollTop(0)
    clearTimeout dragEndTimer
    $('body').addClass 'dragging'

  document.addEventListener 'dragleave', (event) ->
    dragEndTimer = setTimeout ->
      $('body').removeClass 'dragging'
    , 50

Bu, Chrome titreme hatasını veya en azından bana sorunlara neden olan permütasyonu giderir.

Bu yanıtı burada bulabilirsiniz:

Bir alt öğeyi gezdirirken HTML5 sürükle ve bırak özelliği tetiklendi

var counter = 0;

$('#drop').bind({
    dragenter: function(ev) {
        ev.preventDefault(); // needed for IE
        counter++;
        $(this).addClass('red');
    },

    dragleave: function() {
        counter--;
        if (counter === 0) { 
            $(this).removeClass('red');
        }
    }
});

Benim versiyonum:

$(".dropzone").bind("dragover", function(e){
    console.log('dragover');
});

$(".dropzone").bind("dragleave", function(e) {
  var stopDrag = false;
  if (!e.relatedTarget) stopDrag = true;
  else {
    var parentDrop = $(e.relatedTarget).parents('.dropzone');
    if (e.relatedTarget != this && !parentDrop.length) stopDrag = true;
  }

  if (stopDrag) {
    console.log('dragleave');
  }
});

Bu düzen ile:

<div class="dropzone">
  <div class="inner-zone">Inner-zone</div>
</div>

Ben element sınıflarının bir dökümü yaptık e.target, e.currentTarget, e.relatedTargether ikisi için dragoverve dragleaveolaylar.

Bana ebeveyn bloğundan ( .dropzone) ayrılırken e.relatedTargetbu bloğun bir çocuğu olmadığını gösterdi , bu yüzden dropzone dışında olduğumu biliyorum.

Burada, en basit çözümlerden biri ● ︿ ●

Bu kemana bir göz atın <- kutunun içine bir dosya sürüklemeyi deneyin

Bunun gibi bir şey yapabilirsiniz:

var dropZone= document.getElementById('box');
var dropMask = document.getElementById('drop-mask');


dropZone.addEventListener('dragover', drag_over, false);
dropMask.addEventListener('dragleave', drag_leave, false);
dropMask.addEventListener('drop', drag_drop, false);

Bununla ne olduğunu burada bilmelisin.
Sadece kemanlara bir bak, biliyorsun.

Benzer bir sorun yaşadım ve bu şekilde düzelttim:

Sorun: Fonksiyon bırakma (ev) kullanıcı "bırakma bölgesinde" (ul eleman) bir eleman bıraktığında, fakat maalesef eleman çocuklarından birinde (li elemanlar) düşürüldüğünde de ateşlenir.

Çözüm:

function drop(ev) { 
ev.preventDefault(); 
data=ev.dataTransfer.getData('Text'); 
if(ev.target=="[object HTMLLIElement]")  
{ev.target.parentNode.appendChild(document.getElementById(data));}
else{ev.target.appendChild(document.getElementById(data));} 
} 

Kullanıcılar alanı bir dosyaya sürüklediğinde kutu rengi değişecek bir dosya yükleme kutusu için bu kendimi uygulamaya çalışıyordu.

Javascript ve CSS'nin güzel bir karışımı olan bir çözüm buldum. Eğer bir droppable bölge olduğunu varsayalım divkimliğine sahip #drop. Bunu Javascript'inize ekleyin:

$('#drop').on('dragenter', function() {
    $(this).addClass('dragover');
    $(this).children().addClass('inactive');
});

$('#drop').on('dragleave', function() {
    $(this).removeClass('dragover');
    $(this).children().removeClass('inactive');
});

Daha sonra, tüm çocukları devre dışı bırakmak için CSS'nize ekleyin .inactive:

#drop *.inactive {
    pointer-events: none;
}

Bu nedenle, kullanıcı öğeyi kutunun üzerine sürüklediği sürece alt öğeler etkin olmaz.

Burada sunulan geçici çözümlerin hiçbirinden memnun hissetmedim, çünkü çocuk öğeleri üzerinde kontrolü kaybetmek istemiyorum.

Bu yüzden farklı bir mantık yaklaşımı kullandım, jquery-draghandler adı verilen bir jQuery eklentisine çevirdim . Yüksek performansları garanti ederek kesinlikle DOM'yi manipüle etmez. Kullanımı basit:

$(document).ready(function() {

    $(selector).draghandler({
        onDragEnter: function() {
            // $(this).doSomething();
        },
        onDragLeave: function() {
            // $(this).doSomethingElse();
        }
    });

});

Herhangi bir DOM işlevinden ödün vermeden problemle kusursuz bir şekilde ilgilenir.

Git deposunda indirme, ayrıntılar ve açıklamalar .

Aslında https://github.com/lolmaus/jquery.dragbetter/ adresinde gördüklerimi beğeniyorumancak olası bir alternatifi paylaşmak istedim. Genel stratejim, dropzone'a (çocuklarına değil) sürüklerken ya da herhangi bir çocuğunu (köpürme yoluyla) bir arka plan stili uygulamaktı. Sonra bırakma bölgesini sürüklerken stili kaldırırım. Fikir bir çocuğa taşınırken, stili dropzone'dan çıkarken bile (dragleave yangınları) kaldırsam bile, stili herhangi bir çocuğu sürükleyerek ebeveyn dropzone'a tekrar uygularım. Sorun, elbette, dropzone'dan dropzone'un bir çocuğuna geçerken, dragenter, dragleave'dan önce çocuğa ateşlenir, böylece stillerim düzensiz olarak uygulanır. Benim için çözüm, dragenter olayını tekrar mesaj kuyruğuna zorlamak için bir zamanlayıcı kullanmaktı ve sürükleme yaprakından SONRA işleme koymamı sağladı. Zamanlayıcı geri aramasında olaya erişmek için bir kapak kullandım.

$('.dropzone').on('dragenter', function(event) {
  (function (event) {
    setTimeout(function () {
      $(event.target).closest('.dropzone').addClass('highlight');
    }, 0);
  }) (event.originalEvent); 
});

Bu, kromda, yani firefox'ta ve dropzone'daki çocuk sayısından bağımsız olarak çalışıyor gibi görünüyor. Olayların yeniden oluşturulmasını garanti eden zaman aşımı konusunda biraz tedirginim, ancak kullanım durumum için oldukça iyi çalışıyor gibi görünüyor.

Bunu kendim uygulamaya çalışıyordum ve Jquery veya herhangi bir eklenti de istemiyordum.

Ben dosya yükleme işlemek istedim, aşağıdaki şekilde benim için en iyi kabul:

Dosya Yapısı:

--- / uploads {yükleme dizini}

--- /js/slyupload.js {javascript dosyası.}

--- index.php

--- upload.php

--- styles.css {sadece küçük bir stil ..}

HTML Kodu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>my Dzone Upload...</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div id="uploads"></div>        
    <div class="dropzone" id="dropzone">Drop files here to upload</div>     
    <script type="text/javascript" src="js/slyupload.js"></script>      
</body>
</html>

O zaman bu ekli Javascript dosyası :: 'js / slyupload.js'

<!-- begin snippet:  -->

<!-- language: lang-js -->

    // JavaScript Document

    //ondragover, ondragleave...


    (function(){        

        var dropzone = document.getElementById('dropzone');
        var intv;

        function displayUploads(data){
            //console.log(data, data.length);
            var uploads = document.getElementById('uploads'),anchor,x;

            for(x=0; x < data.length; x++){

                //alert(data[x].file);
                anchor = document.createElement('a');
                anchor.href = data[x].file;
                anchor.innerText = data[x].name;

                uploads.appendChild(anchor);
            }               
        }

        function upload(files){
            //console.log(files);
            var formData = new FormData(), 
                xhr      = new XMLHttpRequest(),    //for ajax calls...
                x;                                  //for the loop..

                for(x=0;x<files.length; x++){
                    formData.append('file[]', files[x]);

                    /*//do this for every file...
                    xhr = new XMLHttpRequest();

                    //open... and send individually..
                    xhr.open('post', 'upload.php');
                    xhr.send(formData);*/
                }

                xhr.onload = function(){
                    var data = JSON.parse(this.responseText);   //whatever comes from our php..
                    //console.log(data);
                    displayUploads(data);

                    //clear the interval when upload completes... 
                    clearInterval(intv);
                }                   

                xhr.onerror = function(){
                    console.log(xhr.status);
                }

                //use this to send all together.. and disable the xhr sending above...

                //open... and send individually..
                intv = setInterval(updateProgress, 50);
                xhr.open('post', 'upload.php');
                xhr.send(formData);

                //update progress... 
                 /* */                   
        }

        function updateProgress(){
            console.log('hello');
         }          

        dropzone.ondrop = function(e){
            e.preventDefault(); //prevent the default behaviour.. of displaying images when dropped...
            this.className = 'dropzone';
            //we can now call the uploading... 
            upload(e.dataTransfer.files); //the event has a data transfer object...
        }

        dropzone.ondragover = function(){
            //console.log('hello');
            this.className = 'dropzone dragover';
            return false;
        }

        dropzone.ondragleave = function(){
            this.className = 'dropzone';
            return false;
        }           
    }(window));

CSS:

body{
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
}

.dropzone{
	width:300px; 
	height:300px;
	border:2px dashed #ccc;
	color:#ccc;
	line-height:300px;
	text-align:center;
}

.dropzone.dragover{
	border-color:#000;
	color:#000;
}

Üzgünüm jquery değil javascript, ama benim için bunu çözmenin en mantıklı yolu. Tarayıcı, dropenter'dan (önceki elemanın) (yeni elemanın) dropleave çağırmalıdır, çünkü bir şey forst şeyden ayrılmadan önce başka bir şey giremez, neden yaptığını anlamıyorum! de dropleave böyle:

function mydropleave(e)
{
    e.preventDefault();
    e.stopPropagation();

    setTimeout(function(e){ //the things you want to do },1);
}

Ve damlacı damla yapraklarından sonra olacak, hepsi bu!

greedy : trueÇocuğun işlevini olarak kullanın droppable. Ardından yalnızca ilk katmanı tıklatıp olayı başlatın.