میلاد بسحاق
4 سال پیش توسط میلاد بسحاق مطرح شد
6 پاسخ

محدود کردن onClick در جاوااسکریپت

با سلام
دوستان عزیز بنده یک div دارم، که براش onclick ست کردم، مثل کد زیر :

<div onclick="myOnClick()">
                                    <!-- محتوا -->
                                    <span>حذف</span>
                                </div>

حالا مشکل اینجاست که :
من وقتی روی دیو اصلی کلیک میکنم، ی عملیاتی رو با ajax انجام میدم
و میخوام وقتی روی span حذف کلیک میکنم، ی کار دیگه ای بکنم
منتها وقتی روی span کلیک میکنم، هم ajax مربوط به onclick انجام میشه، هم اون عملیاتی که با روی دکمه حذف کلیک میکنم

  • من میخوام با کلیک روی span حذف، اون عملیات onclick انجام نشه و فقط عملیات حذف انجام بشه

خیلی خیلی ممنونم

@TimeRunner2359
@ashkannazari248
@masoudproton
@milad
@ali.bayat
@Alimotreb
@hesammousavi
@endworld
@code2code
@khanzadimahdi
@info.aligraph
@SeyedMH.Mosavi


ثبت پرسش جدید
مسعود فرامرزی‌راد
تخصص : Front-end Developer
@sm.faramarzirad 4 سال پیش مطرح شد
5

درود

function func1(event) {
//  عملیات حذف

    event.stopPropagation();  // جلوگیری از انتشار کلیک به سطح‌های بالاتر

}

میلاد بسحاق
@miladboshagh 4 سال پیش آپدیت شد
0

جناب فرامرزی انجام دادم، ولی باز نشد

        $('#cart-page__shipping__address-items').on('click', 'a[data-target="#delete"]', function (event) {
            event.stopPropagation();
            var link = this.getAttribute("data-link");
            Swal.fire({
                title: 'آیا مطمئن هستید ؟',
                text: "جهت حذف آدرس، روی بله اطمینان دارم کلیک کنید",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#19bfd3',
                cancelButtonColor: '#e51515',
                confirmButtonText: 'بله، اطمینان دارم',
                cancelButtonText: 'خیر'
            }).then((result) => {
                if (result.value) {
                    let timerInterval
                    Swal.fire({
                        title: 'در حال حذف دسته بندی',
                        html: 'کمی صبور باشید',
                        timerProgressBar: true,
                        onBeforeOpen: () => {
                            Swal.showLoading()
                            timerInterval = setInterval(() => {
                                const content = Swal.getContent()
                                if (content) {
                                    const b = content.querySelector('b')
                                    if (b) {
                                        b.textContent = Swal.getTimerLeft()
                                    }
                                }
                            }, 100)
                        },
                        onClose: () => {
                            clearInterval(timerInterval)
                        }
                    }).then((result) => {
                        /* Read more about handling dismissals below */
                        if (result.dismiss === Swal.DismissReason.timer) {
                            console.log('I was closed by the timer')
                        }
                    });
                    window.location.href = link;
                }
            });
        });
        function changeDeliveryAddress(address_id) {
            $( ".cart-page__shipping__address-items-loading" ).addClass( "cart-page__shipping__address-items-loading-show" );

            var _token = '{{ csrf_token() }}';
            var address_id = address_id;

            $.ajax({
                url: "{{route('front_shop_shipping_address_change_delivery')}}",
                type:'POST',
                data: {_token:_token, address_id},
                success: function(data) {

                    if($.isEmptyObject(data.error)){
                        $(".cart-page__shipping__address-items__item-active").removeClass("cart-page__shipping__address-items__item-active");
                        $(data.success).addClass("cart-page__shipping__address-items__item-active");

                        var divs = document.getElementsByClassName( 'cart-page__shipping__address-items__item-header' );

                        [].slice.call( divs ).forEach(function ( div ) {
                            div.innerHTML = '<i class="far fa-circle"></i> ارسال به این آدرس';
                        });

                        document.querySelector(data.success + " .cart-page__shipping__address-items__item-header").innerHTML = '<i class="far fa-scrubber"></i> به این آدرس ارسال می شود';

                        $( ".cart-page__shipping__address-items-loading" ).removeClass( "cart-page__shipping__address-items-loading-show" );
                    }else{
                        //printErrorMsg(data.error);
                    }
                }
            });
        }

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
0

جناب فرامرزی راد به درستی خدمتتون ذکر کردن راه حل رو.

<div style="height:100px;width:500px;padding:10px;border:1px solid blue;background-color:lightblue;">
This is a div element.
<p style="background-color:pink">This is a p element, in the div element. <br><span style="background-color:orange">This is a span element in the p and the div element.</span></p></div>

<script>
$(document).ready(function(){
  $("span").click(function(event){
    event.stopPropagation();
    alert("The span element was clicked.");
  });
  $("p").click(function(event){
    alert("The p element was clicked.");
  });
  $("div").click(function(){
    alert("The div element was clicked.");
  });
});
</script>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

و این مثال میتونه همون چیزی که شما میخواید رو شامل بشه:
https://www.w3schools.com/jquery/event_stoppropagation.asp


احسان قربانی
تخصص : PHP ، در حال یادگیری لاراول ،...
@TimeRunner2359 4 سال پیش مطرح شد
0

@miladboshagh
سلام و وقت بخیر
این لینک آخر آقای میلاد ، کاملا گویا و واضح هست .
منتهی من پیشنهاد میکنم تا جایی که ممکنه ، لایه بندی html رو جدا از هم بسازید تا نیازی به این کارا نباشه
موفق و سلامت باشید
یا حق


اشکان نظری
تخصص : برنامه نویس
@ashkannazari248 4 سال پیش مطرح شد
0

سلام. اگه این راه ها جواب ندادن میتونید به صورت زیر عمل کنید

<div onclick="myOnClick($event)">
                                    <!-- محتوا -->
                                    <span>حذف</span>
                                </div>

توی متد event رو دریافت کنید و چک کنید مال کدوم تگ هست


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام