html לחיץ אבל גם שיאפשר בחירה

pcinfogmach

אני מנסה ליצור דף html בו כל האלמנטים של li הם לחיצים לדוגמא מחזיר את מספר האלמנט. אבל בלי לאבד את הנוחות של בחירת הטקסט והעתקתו. ש משהו דומה בספריא.
בעצם הרעיון הוא שאם למשל יש לי מסמך שמציג את החומש אז כל פסוק יהיה אפשר ללחוץ עליו כדי לקבל מפרשים וכו'.
הבעיה שניתקלתי בה שברגע שהגדרתי את האלמנט כלחיץ אז זה מפריע לבחירת הטקסט בלי לחיצה עליו.

מקווה שהשאלה מספיק ברורה

מצו"ב הקוד שעשיתי לבינתיים

<!DOCTYPE html>
<html lang="he">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      text-align: right;
      text-align: justify;
      direction: rtl;
    }

    h2 {
      cursor: pointer;
      color: #4169E1;
    }

    h3 {
      cursor: pointer;
      color: #6495ED;
    }

    ol {
      list-style-type: hebrew;
    }
	
	li:hover {
      background-color: #f0f0f0; /* Change the background color to your desired color */
    }
  </style>
</head>
<body>

<h1>במדבר</h1>

<h2>פרק א</h2>
<ol list-style-type: hebrew;>
  <li>וַיְדַבֵּ֨ר יְהֹוָ֧ה אֶל־מֹשֶׁ֛ה בְּמִדְבַּ֥ר סִינַ֖י בְּאֹ֣הֶל מוֹעֵ֑ד בְּאֶחָד֩ לַחֹ֨דֶשׁ הַשֵּׁנִ֜י בַּשָּׁנָ֣ה הַשֵּׁנִ֗ית לְצֵאתָ֛ם מֵאֶ֥רֶץ מִצְרַ֖יִם לֵאמֹֽר׃</li>
  <li>שְׂא֗וּ אֶת־רֹאשׁ֙ כׇּל־עֲדַ֣ת בְּנֵֽי־יִשְׂרָאֵ֔ל לְמִשְׁפְּחֹתָ֖ם לְבֵ֣ית אֲבֹתָ֑ם בְּמִסְפַּ֣ר שֵׁמ֔וֹת כׇּל־זָכָ֖ר לְגֻלְגְּלֹתָֽם׃</li>
  <li>מִבֶּ֨ן עֶשְׂרִ֤ים שָׁנָה֙ וָמַ֔עְלָה כׇּל־יֹצֵ֥א צָבָ֖א בְּיִשְׂרָאֵ֑ל תִּפְקְד֥וּ אֹתָ֛ם לְצִבְאֹתָ֖ם אַתָּ֥ה וְאַהֲרֹֽן׃</li>
  <li>וְאִתְּכֶ֣ם יִהְי֔וּ אִ֥ישׁ אִ֖ישׁ לַמַּטֶּ֑ה אִ֛ישׁ רֹ֥אשׁ לְבֵית־אֲבֹתָ֖יו הֽוּא׃</li>
  <li>וְאֵ֙לֶּה֙ שְׁמ֣וֹת הָֽאֲנָשִׁ֔ים אֲשֶׁ֥ר יַֽעַמְד֖וּ אִתְּכֶ֑ם לִרְאוּבֵ֕ן אֱלִיצ֖וּר בֶּן־שְׁדֵיאֽוּר׃</li>
  <li>לְשִׁמְע֕וֹן שְׁלֻמִיאֵ֖ל בֶּן־צוּרִֽישַׁדָּֽי׃</li>
  <li>לִֽיהוּדָ֕ה נַחְשׁ֖וֹן בֶּן־עַמִּינָדָֽב׃</li>
  <li>לְיִ֨שָׂשכָ֔ר נְתַנְאֵ֖ל בֶּן־צוּעָֽר׃</li>
</ol>
<script>
  // Define the onclick handler globally
  function showAlert() {
    // Check if the clicked element is an ol
    if (this.tagName.toLowerCase() === 'li' && this.parentElement.tagName.toLowerCase() === 'ol') {
      // Get the ordered list number and show an alert
      alert(Array.from(this.parentElement.children).indexOf(this) + 1);
    } else {
      // If not an ol, show the text content
      alert(this.textContent);
    }
  }

  // Attach the click event to all elements with the correct classes
  var customHeader = document.querySelectorAll('.customHeader');
  var customHeader2 = document.querySelectorAll('.customHeader2');
  customHeader.forEach(function (header) {
    header.addEventListener('click', showAlert);
  });
  customHeader2.forEach(function (header) {
    header.addEventListener('click', showAlert);
  });

  // Attach the click event to all h1 elements
  var h3Elements = document.querySelectorAll('h3');
  h3Elements.forEach(function (h3) {
    h3.addEventListener('click', showAlert);
  });

  // Attach the click event to all h2 elements
  var h2Elements = document.querySelectorAll('h2');
  h2Elements.forEach(function (h2) {
    h2.addEventListener('click', showAlert);
  });

  var liElements = document.querySelectorAll('li');
  liElements.forEach(function (li) {
    li.addEventListener('click', showAlert);
  });

</script>
</body>
</html>

dovid

@pcinfogmach כתב בhtml לחיץ אבל גם שיאפשר בחירה:

בעצם הרעיון הוא שאם למשל יש לי מסמך שמציג את החומש אז כל פסוק יהיה אפשר ללחוץ עליו כדי לקבל מפרשים וכו'.

אפשר לעשות שבעת ריחוף על הפסוק יופיע לחצן, אחרת אני לא מתאר לעצמי איך אפשר לשלב בין השניים.
אני לא יכול לבדוק מה יש בספריא בגלל נטפרי (אולי תתאר לי במילים), אבל אם אתה מכיר אתר שמשלב בין שני המשימות, בא נראה מה הוא עושה.
אולי אפשר להאזין לMouseUp במקום לקליק רגיל.

pcinfogmach

@dovid
חשבתי אולי פשוט לעשות שרק המיספור עצמו יהיה לחיץ ולא הטקסט שלו אבל אל הצלחתי לעשות את זה

pcinfogmach

@dovid
אולי אפשר ככה (שהקוד בודר אם יש טקסט מסומן)

var liElements = document.querySelectorAll('li');
liElements.forEach(function (li) {
  li.addEventListener('click', function(event) {
    // Check if any text is selected
    if (window.getSelection().toString() === '') {
      // If no text is selected, call the showAlert function
      showAlert.call(li, event);
    }
  });
});

מה אתה אומר?

dovid

אני מתקשה לעקוב אם השאלה היא "מה" או "איך".
בשאלה שלך המקורית יש גם שאלה רעיונית, בחוויית משתמש, מה הדרך הנוחה לתת גם לבחור טקסט ומאידך לתת תפריט הקשר. וגם שאלה "איך מבצעים" שניסית ולא הצלחת.
אני מתמקד כעת ברעיון, ועל זה שאלתי האם יש לך מקום או התנהגות שהניחה את דעתך.
תתמקד רגע באיך אתה רוצה שיהיה בהנחה שתצליח כל מה שעולה בדעתך (אבל שיהיה הגיוני כי לא שייך שהמחשבה של המשתמש תשפיע על ההתנהגות).
הצעת שהמספרים יהיו לחיצים, אם זה אפשרי זה טוב לך? זה יכול להיות אידאלי?
בהצעה האחרונה שלך, אתה בודק אם יש טקסט בחור, אבל תמיד בעת תחילת בחירה אין כלום שבחור כעת.

pcinfogmach

@dovid
השאלה היא גם מה וגם איך
אין לי גישה לספריא אבל אני לא צריך דווקא כמו שהם עשו כמו שבר אילן עשו גם טוב (שלוחצים על המספר).
אדרבה במחשבה שנייה מבחינתי יותר מסודר שהמספרים יהיו לחיצים ולא בטקסט. אבל לא הצלחתי.
התוצאה שאני רוצה היא שהמשתמש יוכל לנווט על ידי לחיצה למפרשים הקשורים לאותו הפסוק שהוא לחץ עליו.

@dovid כתב בhtml לחיץ אבל גם שיאפשר בחירה:

בהצעה האחרונה שלך, אתה בודק אם יש טקסט בחור, אבל תמיד בעת תחילת בחירה אין כלום שבחור כעת.

נכון, זה יכול ליצור קצת בעיות.

dovid

@pcinfogmach כתב בhtml לחיץ אבל גם שיאפשר בחירה:

אדרבה במחשבה שנייה מבחינתי יותר מסודר שהמספרים יהיו לחיצים ולא בטקסט. אבל לא הצלחתי.

אתה זה שמייצר את הHTML, אתה צריך לשתול מזהי מספור ולא להסתמך על המספור האוטומטי של הHTML שבמוקדם או במאוחר ידפוק אותך, למשל פה עם הלחיצה.

mekev

פוסט זה נמחק!

צבי-ש

@dovid כתב בhtml לחיץ אבל גם שיאפשר בחירה:

אני לא יכול לבדוק מה יש בספריא בגלל נטפרי (אולי תתאר לי במילים),

הקלטת מסך 2023-12-13 ב-14.43.57.mov

ivrtikshoret

@צבי-ש כתב בhtml לחיץ אבל גם שיאפשר בחירה:

@dovid כתב בhtml לחיץ אבל גם שיאפשר בחירה:

אני לא יכול לבדוק מה יש בספריא בגלל נטפרי (אולי תתאר לי במילים),

הקלטת מסך 2023-12-13 ב-14.43.57.mov

בצילום מסך ששלחת רואים רק אופצייה ללחוץ לא רואים את האופצייה של בחירת טקסט
@dovid לדעתי הם אכן משתמשים עם MouseUp

תחומים - פורום חרדי מקצועי

html לחיץ אבל גם שיאפשר בחירה