rafinos Δημοσ. 6 Μαΐου 2023 Share Δημοσ. 6 Μαΐου 2023 (επεξεργασμένο) Έστω ότι έχω τα τετράγωνα της εικόνας και ότι κάθε ένα είναι div. Όταν γίνεται κλικ σε κάποιο από τα κουτιά τότε αυτό να γίνει ας πούμε κόκκινο. Μέχρι εδώ όλα καλά. Αυτό που θέλω είναι αν μπορεί να γίνει το εξής: Αν κάνω κλικ στο πρώτο τετράγωνο και σύρω το ποντίκι χωρίς να αφήσω το κλικ στο δίπλα ή στο κάτω τετράγωνο να γίνει και σε αυτό και όσο κουνάω το ποντίκι χωρίς να αφήσω το κλικ να συνεχίσει αυτό να λειτουργεί. Το παραπάνω παράδειγμα είναι το απλούστερο που μπόρεσα να σκεφτώ για να σας εξηγήσω τι θέλω. Δεν ξέρω πως αλλιώς να το πω. Επεξ/σία 6 Μαΐου 2023 από rafinos Συνδέστε για να σχολιάσετε Κοινοποίηση σε άλλες σελίδες άλλες επιλογές
archangelgre Δημοσ. 6 Μαΐου 2023 Share Δημοσ. 6 Μαΐου 2023 3 ώρες πριν, rafinos είπε Έστω ότι έχω τα τετράγωνα της εικόνας και ότι κάθε ένα είναι div. Όταν γίνεται κλικ σε κάποιο από τα κουτιά τότε αυτό να γίνει ας πούμε κόκκινο. Μέχρι εδώ όλα καλά. Αυτό που θέλω είναι αν μπορεί να γίνει το εξής: Αν κάνω κλικ στο πρώτο τετράγωνο και σύρω το ποντίκι χωρίς να αφήσω το κλικ στο δίπλα ή στο κάτω τετράγωνο να γίνει και σε αυτό και όσο κουνάω το ποντίκι χωρίς να αφήσω το κλικ να συνεχίσει αυτό να λειτουργεί. Το παραπάνω παράδειγμα είναι το απλούστερο που μπόρεσα να σκεφτώ για να σας εξηγήσω τι θέλω. Δεν ξέρω πως αλλιώς να το πω. θα σου ριξω μια πολυ απλη ιδεα ,θα το τσεκαρω αργοτερα . Θεωρω πως αν βαλεις στο parent container το click event , και μετα στα μεσα κουτακια (child element με καποιο foreach )στο mouseover event . Πολυ απλοικα το λεω ,θελει λιγο πειραματισμο Συνδέστε για να σχολιάσετε Κοινοποίηση σε άλλες σελίδες άλλες επιλογές
Λύση papmel Δημοσ. 7 Μαΐου 2023 Λύση Share Δημοσ. 7 Μαΐου 2023 <!doctype html> <html> <head> <title>test</title> <style> * { box-sizing: border-box; } html { margin: 0; padding: 0; } body { padding: 0; margin:0 auto; } .grid-container{ display:flex; } .box{ background-color:#ccc; border:1px solid #111; height:120px; width:100%; } </style> </head> <body> <div class="grid-container"> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> </div> <div class="grid-container"> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> </div> <script> var isClicked=false; function enableLight(elem){elem.style.backgroundColor = "green";isClicked=true;console.log(isClicked)} function disableLight(){isClicked=false;console.log(isClicked)} function light(elem){if (isClicked) elem.style.backgroundColor = "green";} </script> </body> </html> 2 Συνδέστε για να σχολιάσετε Κοινοποίηση σε άλλες σελίδες άλλες επιλογές
rafinos Δημοσ. 7 Μαΐου 2023 Μέλος Share Δημοσ. 7 Μαΐου 2023 4 λεπτά πριν, papmel είπε <!doctype html> <html> <head> <title>test</title> <style> * { box-sizing: border-box; } html { margin: 0; padding: 0; } body { padding: 0; margin:0 auto; } .grid-container{ display:flex; } .box{ background-color:#ccc; border:1px solid #111; height:120px; width:100%; } </style> </head> <body> <div class="grid-container"> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> </div> <div class="grid-container"> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> <div class="box" onmouseover="light(this)" onmousedown="enableLight(this)" onmouseup="disableLight()"></div> </div> <script> var isClicked=false; function enableLight(elem){elem.style.backgroundColor = "green";isClicked=true;console.log(isClicked)} function disableLight(){isClicked=false;console.log(isClicked)} function light(elem){if (isClicked) elem.style.backgroundColor = "green";} </script> </body> </html> Ωραίος! Κάτι τέτοιο εννοούσα. Αυτά τα 3 events λειτουργούν με τον ίδιο τρόπο και σε touch οθόνες ή θα πρέπει να παίξω με διαφορετικά events σε αυτή την περίπτωση; Συνδέστε για να σχολιάσετε Κοινοποίηση σε άλλες σελίδες άλλες επιλογές
papmel Δημοσ. 7 Μαΐου 2023 Share Δημοσ. 7 Μαΐου 2023 5 ώρες πριν, rafinos είπε Ωραίος! Κάτι τέτοιο εννοούσα. Αυτά τα 3 events λειτουργούν με τον ίδιο τρόπο και σε touch οθόνες ή θα πρέπει να παίξω με διαφορετικά events σε αυτή την περίπτωση; σου το εκανα ετσι με αυτα τα events για να παρεις την ιδεα. αν το θες και σε touch οθόνες εκει πιο καλα να χρησιμοποιησεις jquery η κατι αναλογο και θα παιζει και εκει μια χαρα. 1 Συνδέστε για να σχολιάσετε Κοινοποίηση σε άλλες σελίδες άλλες επιλογές
Προτεινόμενες αναρτήσεις
Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε
Πρέπει να είστε μέλος για να αφήσετε σχόλιο
Δημιουργία λογαριασμού
Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!
Δημιουργία νέου λογαριασμούΣύνδεση
Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.
Συνδεθείτε τώρα