جاوااسکریپت مشکل با اولویت المان ها

[iceteenagers]

سلام
من یه div دارم که براش یه onclick تعریف کردم و کار هم می کنه و مشکلی نیست منتها بعدش تعدادی المان توی این div اضافه کردم و وفتی روی این المان ها کلیک میکنم دیگه onlclick اون div اصلیم اعمال نمیشه.
ممنون میشم بگید چیکار کنم فقط اینم بگم که متاسفانه به دلایل محدودیت هایی از jquery و فریم ورک و کتابخونه ای نمی تونم استفاده کنم
ممنون میشم سریعتر کمک کنید

[iceteenagers]

این هم بخشی از کد:


<div id="1" class="box grey" onclick="selectit(this.id);">
<i id="i1" class="bigicon fa fa-bar-chart fa-4x"></i>
<h3 id="h1">نااام</h3>
<div><span class="eng" id="s1">987KB</span><span><a name="1" onclick="idnoma(this.name);"><i class="fa fa-download"></i></a></span></div>
</div>

[frednasri]

سلام.


<div id="1" class="box grey" onclick="selectit(this.id);">
<i id="i1" class="bigicon fa fa-bar-chart fa-4x"></i>
<h3 id="h1">نااام</h3>
<div>
<span class="eng" id="s1"></span>
<span>
<a name="1" onclick="var event = arguments[0] || window.event; event.stopPropagation(); event.cancelBubble = true; idnoma(this.name); ">987KB
<i class="fa fa-download"></i>
</a>
</span>
</div>
</div>

قبل از هر چیز 987KB رو به داخل تگ <a></a> منتقل کردم.

مشکل اینه که با هر بار کلیک روی اون div فرعی که تابع idnoma توشه (child div)، یک بار هم تابع selectit که توی div اصلیه (parent div) اجرا میشه. برای جلوگیری از کلیک به div بالاتر، باید این bubbling رو متوقف کنید. برای این کار، کدهای مورد نیاز رو توی onclick دوم (توی div فرعی) قبل از خود تابع idnoma قرار دادم که به مرورگر بگیم لازم نیست کلیک رو به المان های بالاتر انتقال بده.

موفق باشید.

[iceteenagers]

سلام.


<div id="1" class="box grey" onclick="selectit(this.id);">
<i id="i1" class="bigicon fa fa-bar-chart fa-4x"></i>
<h3 id="h1">نااام</h3>
<div>
<span class="eng" id="s1"></span>
<span>
<a name="1" onclick="var event = arguments[0] || window.event; event.stopPropagation(); event.cancelBubble = true; idnoma(this.name); ">987KB
<i class="fa fa-download"></i>
</a>
</span>
</div>
</div>

قبل از هر چیز 987KB رو به داخل تگ <a></a> منتقل کردم.

مشکل اینه که با هر بار کلیک روی اون div فرعی که تابع idnoma توشه (child div)، یک بار هم تابع selectit که توی div اصلیه (parent div) اجرا میشه. برای جلوگیری از کلیک به div بالاتر، باید این bubbling رو متوقف کنید. برای این کار، کدهای مورد نیاز رو توی onclick دوم (توی div فرعی) قبل از خود تابع idnoma قرار دادم که به مرورگر بگیم لازم نیست کلیک رو به المان های بالاتر انتقال بده.

موفق باشید.

بسیار بسیار از وقتی که گذاشتید متشکرم ولی همچنان وقتی رو المان های داخلی کلیک می کنم selectit اجرا نمیشه

[frednasri]

شما می خواین onclick اولیه (selectit) با کلیک روی div فرعی (مثلاً کلیک روی 987KB) هم اجرا بشه؟

خب در این صورت، با کلیک روی 987KB، به طور همزمان هم onclick مربوط به تابع idnoma اجرا میشه و هم onclick مربوط به selectit.

اگه این چیزیه که می خواین، فقط کافیه توی کد اصلی خودتون 987KB رو به داخل تگ <a></a> انتقال بدید.

اگه مشکلی بود، لطفاً کدهای مربوط به توابع selectit و idnoma رو بفرستید که ببینم. ممنون.

موفق باشید.

[iceteenagers]

ببخشید مثل اینکه بد رسوندم یکم منظورمو یه div دارم که کلاس box grey داره توی اون چندتا المان هس که شامل یه h3 یه i یه span با کلاس eng و یه اسپن onclick دار.
حالا من هرجای div اصلی که شامل این المان ها نمیشه کلیک می کنم تابع selectit اعمال میشه ولی روی هرکدوم این المان ها که کلیک می کنم اتفاقی نمی افته که می خوام باز هم همون selectit اجرا شه.
*نکته : طبیعتا منظورم غیر از اون span ای هست که onclick داره.
باز هم ممنونم

[iceteenagers]

فکر نمی کنم نیازی به اون دوتابع باشه ولی جهت اطمینان:

function selectit(id) {
var i=1;
var check=0;
var total=0;
var variable=0;

if(thatsit==0) {
for(i;i<=numb;i++) {
document.getElementById(i).className = "box grey";
}
document.getElementById(id).className = "box blue";
document.getElementById('selectall').disabled = '';
document.getElementById('deselect').disabled = '';
document.getElementById('download').disabled = '';
} else {
if (document.getElementById(id).className=="box grey") {
document.getElementById(id).className = "box blue";
} else {
document.getElementById(id).className = "box grey";
}

}
i=1;
for(i;i<=numb;i++) {
if(document.getElementById(i).className == "box blue") {
check++;
variable="d"+i;
total=total+eval(variable).size;
}
if(check==numb) {
document.getElementById('selectall').disabled = 'disabled';
document.getElementById('deselect').disabled = '';
document.getElementById('download').disabled = '';
} else if(check==0) {
document.getElementById('selectall').disabled = '';
document.getElementById('deselect').disabled = 'disabled';
document.getElementById('download').disabled = 'disabled';
} else{
document.getElementById('selectall').disabled = '';
document.getElementById('deselect').disabled = '';
document.getElementById('download').disabled = '';
}
}
document.getElementById("size").innerHTML=(sizeit(total)) + size(total);
}


function idnoma(name) {
alert(name);
}

[frednasri]

سلام.

یه فایل پیوست کردم که لطفاً ببینید.

طبق نکته ای که فرمودین، من اصلاً با onclick دوم کاری ندارم.

برای اینکه مطمئن بشیم که کجا رو داریم کلیک می کنیم، من به تمام المان های داخل div اصلی، متن اضافه کردم. در واقع تمام المان های شما داخل div اصلی با کلاس box grey قرار دارند که باید onclick هم روی اونا اجرا بشه.

بعد یه کنتور هم توی صفحه گذاشتم که ببینیم چند بار و روی کدوم المان onclick عمل می کنه.

خودتون می تونید تو فایل پیوست ببینید که روی هر کدوم از المان ها که کلیک کنید، یکبار onclick اجرا می شه و خروجی تابع selectit هم نمایش داده میشه.

امیدوارم این بار منظورتون رو درست متوجه شده باشم.

در ضمن، توی تابع selectit شما که کدش رو فرستادید، متغیر thatsit تو خط 7 اصلاً تعریف نشده (حداقل توی این کدها) که ممکنه این علت مشکل شما باشه (چون همونطور که در فایل پیوست می بینید، در واقع من هیچ تغییر خاصی توی کدهای html و المان های شما ندادم).

موفق باشید.

136303

[iceteenagers]

سلام
ببخشید متوجه نشدم الان چیکار کردید که درسته؟صرفا متن اضافه کردید؟

[frednasri]

بله. کد های html دقیقاً کد های شماست و من فقط بین تگ ها متن اضافه کردم.

همونطور که گفتم، ممکنه مشکل از تابع selectit شما باشه. اونو بررسی کنید.

[iceteenagers]

نه اون thatsit بالاتر هم تعریف شده من براتون فایلمو میذارم اگر میشه چک کنید ممنون.136304

[frednasri]

سلام.

کد زیر رو به onclick اصلی اضافه کنید، انشاا... درست میشه.

در واقع onclick اصلی شما باید به شکل زیر باشه:

onclick="var event = arguments[0] || window.event; event.stopPropagation();
event.cancelBubble = true; selectit(this.id);"

فایلتون هم با همین تغییر پیوست کردم که ببینید.

موفق باشید.

136317

[iceteenagers]

دوست عزیز نمی دونم با چه زبونی ازتون تشکر کنم بسیار بسیار ممنون !